React Router v4: param im Konflikt mit 404

Question

Ich versuche derzeit, meinen Kopf um Reagieren Router zu wickeln. Im Moment versuche ich einen Router zu erreichen, die etwa wie folgt aussieht:

<BrowserRouter> 
    <div> 
     <Switch> 
      <Route exact path="/" component={App} /> 
      <Route exact path="/:pageName" component={Page} /> 
      <Route component={NotFound}/> 
     </Switch> 
    </div> 
</BrowserRouter> 

Die Idee ist, dass die Seite Komponente, die verwenden: pagename den richtigen Titel und Inhalt zu machen. Wenn jedoch der Seitenname nicht existiert, sollte die Seite notFound (404) gerendert werden.

Im Moment wird die 404-Seite niemals gerendert, da alle URLs mit der Page-Route übereinstimmen.

Was ist der herkömmliche Weg, um zu überprüfen, ob der pageName existiert, und nur die Seite-Komponente in Fällen, in denen es tut? Soll ich das 's' dynamisch einrichten oder sollte die Page-Komponente prüfen und umleiten? Wie sollte ich darüber nachdenken?

Answer 1

Wenn Sie die Parameter pagename liegt innerhalb bestimmter Satz vordefinierter Werte haben möchten, würde ich nur jeden dieser Werte als separate Route Liste:

<BrowserRouter> 
    <div> 
     <Switch> 
      <Route exact path="/" component={App} /> 
      <Route exact path="/page1" component={Page} /> 
      <Route exact path="/page2" component={Page} /> 
      <Route exact path="/pagexyz" component={Page} /> 
      <Route path="*" component={NotFound}/> 
     </Switch> 
    </div> 
</BrowserRouter> 

Wenn Sie darauf bestehen, nur einen Weg für alle Seiten zu haben, nach diesem Artikel you can use regexp to specify path so ou kann regexp schreiben, die nur die Seitennamen akzeptiert, die Sie haben und andere ablehnen.

Wenn bestehende Seiten gesetzt ist nicht vordefiniert, sondern in Array enthält Ich würde Karte verwenden Routen wie zu erzeugen, in:

pageNames.map((name) => (<Route exact path={'/'+name} component={Page} />