react-router - 如何在 react-router v4 的根路由上设置可选参数？

Question

假设我有以下两条路线：

    ...
    <Route exact path="/:param1?/" component={Home}/>
    <Route path="/news" component={News}/>
    ...

现在，当我尝试点击路由时，会触发带有参数/news的根路由...Homeparam1

我认为解决方案是像这样在 param1 之前设置一个问号，/?param1这样它就可以与路由分开，但我不知道如何在 react-router v4 中做到这一点

Answer 1

官方文档中有一个如何执行此操作的示例。你可以在这里找到。

您需要先使用 Switch 组件，而您的 /news 路由是第一位的。

<Switch>
    <Route path="/news" component={News}/>
    <Route exact path="/:param1?/" component={Home}/>
</Switch>

Switch 将始终只渲染一个 Route。所以在上面的例子中，如果 /news 没有激活，那么 /:param1 就会激活。