多动态路由 (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&nbsp;path={`/:City/Hotspots`}&nbsp;component={Hotspots}&nbsp;/> <Route&nbsp;path={`/:City/:CatName`}&nbsp;component={Activities}&nbsp;/>所以，现在当你输入 时/:City/Hotspots，react-router-dom 找到的第一条路线将是正确的路线，而任何其他路线/:City/将转到Activitiesroute。