React Router v4：参数与404冲突

Question

我目前正试图围绕反应路由器。目前我正在尝试完成一个看起来像这样的路由器：

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

这个想法是 Page 组件将使用 :pageName 来呈现正确的标题和内容。但是，如果 pageName 不存在，它应该呈现 notFound (404) 页面。

目前 404 页面永远不会呈现，因为所有 url 都与 Page 路由匹配。

检查 pageName 是否存在的常规方法是什么，并且仅在存在的情况下匹配 Page 组件？我应该动态设置，还是应该页面组件检查和重定向？我该怎么想？

Answer 1

如果您希望参数 pageName 位于特定的预定义值集中，我会将这些值中的每一个列为单独的路由：

<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，您可以编写只接受您将拥有的页面名称并拒绝其他页面名称的正则表达式。

如果一组现有页面未预定义但包含在数组中，我将使用 map 生成如下路线：

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