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

【问题标题】：How to set an optional parameter on root route in react-router v4?如何在 react-router v4 的根路由上设置可选参数？
【发布时间】：2017-08-07 04:32:54
【问题描述】：

假设我有以下 2 条路线：

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

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

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

【问题讨论】：

React Router with optional path parameter的可能重复
绝对不是，我知道如何设置可选参数，（这是您链接中的问题）！我的问题更多是关于如何区分参数和另一条路线......请参阅下面的答案......
好吧...只是想帮忙:)

标签： react-router react-router-v4

【解决方案1】：

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

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

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

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

【讨论】：

嘿伙计，你能帮我如何使用可选路径（例如语言）为主页创建路由器我尝试这样的事情：<Switch> <Route exact path="/:language?" component={FirstPage} /> <Route exact path="/:language?/add" component={AddPage} /> </Switch> 但在这种情况下，第二条路由无法正常工作没有语言参数。