+-
我在Reactjs应用的路径选择上遇到了一个问题，我需要两个准确的路径。
1. path = /user/
2. path = /user/setting
当我调用第二个路径时，它显示的是两个组件的合并页面。
<Route path='/user/:param1' component={routeProps => <MyTab {...routeProps} remotes={remotes} />}/>
<Route path='/(user/settings)/:param1' component={UserSettings}/>
1
投票
投票
你可以写一个开关组件包装的路由，并重新排序，使第一个匹配的路由被呈现。
<Switch>
<Route path='/(user/settings)/:param1' component={UserSettings}/>
<Route path='/user/:param1' component={routeProps => <MyTab {...routeProps} remotes={remotes} />}/>
</Switch>
你看到当前行为的原因是 '/(user/settings)/:param1' 也符合 '/user/:param1' 哪儿 params 将是 settings 因为我们并没有检查是否完全匹配，所以两条路线都会被渲染成
在Switch内部重新排序路由，将确保如果 /user/settings/:param1 匹配，其余的路由则不匹配。如果你不重新排序，则 '/user/:param1' 途径将被匹配为 /user/settings/:param1 而UserSettings组件将永远不会被呈现。
你可以简单地在两条路线上使用精确的关键字，如
<Route exact path='/user/:param1' component={routeProps => <MyTab {...routeProps} remotes={remotes} />}/>
<Route exact path='/(user/settings)/:param1' component={UserSettings}/>
但是，如果你这样做，你将无法在MyTab或UserSettings组件中编写任何嵌套路由。
2
投票
投票
正如舒巴姆所解释的那样。/(user/settings)/:param1 路径匹配 /user/:param1. 你可以做的是在你的网站上添加 exact props，将其设置为 true。
<Route exact path='/user/:param1' component={routeProps => <MyTab {...routeProps} remotes={remotes} />}/>
<Route exact path='/(user/settings)/:param1' component={UserSettings}/>
这将禁用路由的部分匹配，确保在路径完全匹配的情况下返回路由。
