CODEWITHSUNDEEP
reactjsreact-router-dom
Lun
Lun

Reputation: 1131

react 2 similar routes overlap and causes only 1 to show

<Route path={`/games/mods`} /> // 1st

<Route path={`/games/mods/files`} /> // 2nd

Here I have 2 simple routes that are relative/dynamic, I cannot add the 'exact' parameter to them because when a user clicks on a game the 1st path becomes like this /games/mods/Halo so if it's exact then it won't show anything... the problem is that when the user goes to games/mods/files/Halo the 1st route gets activated and the 2nd one gets ignored, what can I do?

Upvotes: 0

Views: 35

Answers (2)

Sanket Shah
Sanket Shah

Reputation: 3091

You can write your routes like this:

1st Approach:

Try to wrap your routes inside Switch and change the sequence of your routes

<Switch>
  <Route path={`/games/mods/files`} /> // 1st
  <Route path={`/games/mods`} /> // 2nd
</Switch>

2nd Approach:

Access Halo in your route /games/mods/Halo by writing your route like /games/mods/:name.

<Switch>
  <Route path={`/games/mods/files/:name`} /> // 1st
  <Route path={`/games/mods/:name`} /> // 2nd
</Switch>

Check out Route Props documentation: https://reactrouter.com/web/api/Route/route-props

Upvotes: 1

Chuck
Chuck

Reputation: 804

Well, this seems like a silly answer, but worthy try. Just change the order might help you.

<Route path={`/games/mods/files`} /> // 1st

<Route path={`/games/mods`} /> // 2nd

Upvotes: 1

Related Questions