React Router v4：参数与 404 冲突

Question

我目前正在努力研究 React 路由器。目前我正在尝试完成一个看起来像这样的路由器：

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

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

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

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

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

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

React Router v4：参数与 404 冲突

React Router v4 :param conflicting with 404

reactjs

react-router

react-router-v4