反應路由器v4：參數與404衝突

Question

我目前正在試圖圍繞反應路由器我的頭。目前我正在試圖完成一個路由器，看起來是這樣的：

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

的想法是，頁面組件將使用：頁面名來呈現正確的標題和內容。但是，如果pageName不存在，它應該呈現notFound（404）頁面。

目前404頁面將永遠不會呈現，因爲所有的url都匹配Page Page。

什麼是傳統的方式來檢查pageName是否存在，並且只有在頁面組件匹配的情況下才會這樣做？我應該動態設置's，還是應該檢查頁面組件並重定向？我應該怎麼想？

Answer 1

如果您想該參數頁面名處於某一組預定義值的範圍內，我只列出了每個這些值作爲獨立的路線：

<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> 

如果你堅持在所有頁面上只有一個途徑，根據這篇文章you can use regexp to specify path所以你可以寫正則表達式，將只接受你將擁有的頁面名稱並拒絕其他人。

如果設置現有的網頁沒有預先定義，但包含在陣列我會用地圖生成像路線：

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