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

Posted 2023-02-21

【中文标题】如何在 react-router v4 的根路由上设置可选参数？

【英文标题】：How to set an optional parameter on root route in 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的可能重复

绝对不是，我知道如何设置可选参数，（这是您链接中的问题）！我的问题更多是关于如何区分参数和另一条路线......请参阅下面的答案......

好吧...只是想帮忙:)

【参考方案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> 但在这种情况下，第二条路由无法正常工作没有语言参数。