Wie validiere ich URL-Params mit React-Router?

Question

Ich habe eine Website, die URLs von ihnen Form /widgets/:id ermöglicht. Ich habe nicht mehr als 50 Widgets, also ist /widgets/51 keine gültige URL. Wie gehe ich beim Rendern einer Fehlerseite vor, wenn id größer als 50 ist?

Sollte ich den Wert von id in meiner Widget-Komponente überprüfen? Oder sollte ich es auf der Routenebene validieren? Außerdem würde ich es vorziehen, dass die Anzeige einer Fehlerseite die URL nicht ändert. Das heißt, wenn ein Benutzer zu /widgets/51 navigiert, möchte ich eine Fehlerseite anzeigen, aber ich möchte, dass die URL, die im Browser angezeigt wird, weiterhin /widgets/51 anzeigt.

Vielen Dank im Voraus!

Answer 1

Wenn Sie bevorzugen, dass die URL nicht ändert, wenn Sie die Fehlermeldung dann behandeln, sollten Sie über die Logik verfügen, um die Parameter in der Komponente Widget zu testen. Sie sollten es wie folgt tun

render() { 
    if(this.props.match.params.id > 50) { 
     return <ErrorView/> 
    }else { 
     return <WidgetView/> 
    } 
}