CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-v4
SamYoungNY
SamYoungNY

Reputation: 6624

React Router 4 Nested Routes Clashing

I have the following routes:

<Switch>
  <Route path='/:profileType/:profileId' component={Profile}/>
  <Route path='/about/:aboutThing' component={AboutThing}/>
</Switch>

When I try and go to /about/:aboutThing - it's recognized as a {Profile} route. This makes sense, as technically :profileType can be any string and thus any nested route will be recognized as a Profile.

I'm wondering if it's possible to render {AboutThing} without changing its route. Technically, /about should be a reserved word for that route. I tried doing:

<Route exact path='/about/:aboutThing' component={AboutThing}/>

But that didn't work either. Trying not to have to add an extra string in that path in order to make it work. Any thoughts/ideas?

Upvotes: 0

Views: 68

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281626

The answer is pretty straight forward, Switch stops after the first matched route, so you could rearrange your routes like

<Switch>
  <Route path='/about/:aboutThing' component={AboutThing}/>
  <Route path='/:profileType/:profileId' component={Profile}/>
</Switch>

Upvotes: 5

Related Questions