将字符串查询放在React-router中的路径之间

Question

我正在使用reactJS创建一个应用程序。我正在通过react-router定义路由。

示例代码如下：

<Router history={browserHistory()}>
    <Route path="/" component={App}>
        <Route path="taco/:name" component={Taco} />
    </Route>
</Router>

但我想使用这样的东西：

 <Route path="taco?yourchoice/:name" component={Taco} />

但我无法做到。

任何帮助都将不胜感激。

由于

Answer 1

path="taco?yourchoice/:name不是有效路径。因为您在yourchoice和:name之间包含正斜杠，所以如果您尝试在查询后放置路径段或捕获yourchoice查询参数值，我不肯定。

对于前者，您不能在URL的搜索段之后放置路径段，并且您需要重新排序路径。对于后者，当React Router匹配当前位置以路由路径时，它不会考虑搜索字符串。但是，该位置将被解析，查询参数将在location对象上可用（作为道具注入<Route>的{​​{1}}。

所以，考虑到路线：

component

当用户导航到网址时：

<Route path="taco" component={Taco} />

example.com/taco?yourchoice=fish 组件将被渲染，其中一个道具将为Taco。

location