反应路由器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} />