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

Question

我有两个不同的动态路由，为什么第二个动态路由不工作(它的返回活动组件它应该是热点)，提前感谢

 <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

这是因为url City/Hotspots正在进入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/的路径都将转到Activities路由。