将字符串查询放入React路由器的路径中

我正在使用reactJS创建一个应用程序。我正在通过react-router定义路由。将字符串查询放入React路由器的路径中

样本代码如下：

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

，但我想用这样的：

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

，但我不能这样做。

任何帮助，将不胜感激。

感谢

来源

2016-12-29 Ajay Kumar

我不认为你需要说明那里的查询参数。 React-router在根组件上注入'location'属性 – Kinnza

所以你想'taco？yourchoice = value'对吗？ –

path="taco?yourchoice/:name是不是一个有效的路径。由于您在yourchoice和:name之间包含正斜杠，因此如果您试图在查询后放置路径段或捕获yourchoice查询参数值，我并不积极。

在前者的情况下，不能在URL的搜索片段后放置路径片段，而需要重新排序路径。对于后者，React Router在匹配当前位置以路由路径时不会考虑搜索字符串。然而，该位置将被解析和查询参数将是可利用的location对象上（其被注入为道具到，给定路由的<Route>的component

所以：

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

当。用户导航到所述地址：

example.com/taco?yourchoice=fish

的Taco组件将被渲染及其道具之一将是location

class Taco extends React.Component { 
    render() { 
    const { query } = this.props.location 

    return <div>A {query.yourchoice} taco</div> 
    } 
}

来源

2016-12-29 17:37:06

将字符串查询放入React路由器的路径中

回答

相关问题