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

Question

i have two different dynamic routes, why second dynamic route doesn't work (its return Activities component it should be Hotspots ) thanks in advance

 <Switch>
        <Route exact path ='/' component={Home} />
        <Route path={`/:City/:CatName`} component={Activities} />
        <Route  path={`/:City/Hotspots`} component={Hotspots} />
      </Switch>

here is Links

<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

That's because url City/Hotspots is getting in Activities route.

As you are setting Activities route with :CatName it indicates that this part of the URL is a placeholder, so when your URL are like /:City/Hotspots its understand the Hotspots is as placeholder for :CatName .

To fix it just change the route's order, leaving Hotspots route as first, like:

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

So, now when you entered /:City/Hotspots , the first route that react-router-dom find will be the right one, and any other path with /:City/ will go to Activities route.