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

Question

假设我有以下 2 条路线：

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

现在，当我尝试访问路由 /news 时，会触发带有参数 param1 的 Home 的根路由...

我假设解决方案是像这样在 param1 之前设置一个问号 /?param1 这样它就可以从路由中保留下来，但我不知道如何在 react-router v4 中做到这一点

Answer 1

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

您需要使用 Switch 组件，并首先使用 /news 路由。

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

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