多动态路由 (react-router-dom)

Question

我有两条不同的动态路线，为什么第二条动态路线不起作用（它的返回 Activities 组件应该是 Hotspots ）在此先感谢 <Switch>        <Route exact path ='/' component={Home} />        <Route path={`/:City/:CatName`} component={Activities} />        <Route  path={`/:City/Hotspots`} component={Hotspots} />      </Switch>这是链接<li>                    <span><Link to={`/${Order.City.replace(' ', '-')}/Hotspots`}>Hotspots</Link></span>                </li>                <li>                    <span><Link to={`/${Order.City.replace(' ', '-')}/Activities`}>Activities</Link></span>                </li>

Answer 1

那是因为 urlCity/Hotspots进入了Activities路由。

当您设置 Activities 路由时，:CatName它表示 URL 的这一部分是占位符，因此当您的 URL 类似于/:City/Hotspots它时，热点是作为占位符的:CatName。

要修复它，只需更改路线的顺序，将Hotspots路线留在第一位，例如：

<Route path={`/:City/Hotspots`} component={Hotspots} />
<Route path={`/:City/:CatName`} component={Activities} />

所以，现在当你输入 时/:City/Hotspots，react-router-dom 找到的第一条路线将是正确的路线，而任何其他路线/:City/将转到Activitiesroute。