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页面永远不会呈现，因为所有网址都与Page route匹配。

检查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} />

React Router v4：param与404

1 个答案: