CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
Doğancan Arabacı
Doğancan Arabacı

Reputation: 3982

React-router-dom doesn't render routes defined after a custom component in switch

I was trying different ways of declaring routes in a modular way. I came across to a strange behaviour:

<Switch>
  <Route path='/1' component={Route1} />
  <ModuleLikeRoutes />
  <Route path='/2' component={Route2} />
</Switch>

React router completely ignores /2 and doesn't render Route2. I couldn't find any reason why. I know I can import a 'module' component like

<Route path='/module' component={ModuleComponent} />

and probably it's the better way to do it. But I'm just curios how/why it ignores the routes after a custom component. Why I cant render Route2 in the example?

Here is a working fiddle https://jsfiddle.net/o4dtrpag/

Upvotes: 1

Views: 124

Answers (2)

Ponleu
Ponleu

Reputation: 1618

I am not sure if it is a bug or a not-supported feature by the library. However, the below code works by order the ModuleLikeRoutes to the last position.

<Switch>
  <Route path='/1' component={Route1} />
  <Route path='/2' component={Route2} />
  <ModuleLikeRoutes />
</Switch>

Upvotes: 0

Tholle
Tholle

Reputation: 112777

A Switch will render only one of its children. If the path doesn't match /1 it will check the second one which is ModuleLikeRoutes, and that will be rendered every time, effectively making all components after it meaningless.

Upvotes: 1

Related Questions