Conditionally Render a React Router v4 Route with the Switch Component

Share this video with your friends

Send Tweet

We often want to render a Route conditionally within our application. In React Router v4, the Route components match the current route inclusively so a “stack” of Routes will all be processed. To render a single Route exclusively we can wrap them in the Switch component to render the first Route that matches our current URL.

Carlos Núñez
Carlos Núñez
~ 6 years ago

What a tricky solution, I do not like it at all, if we order differently our routes could be a mess. In a real application with some level of abstraction declaring paths could be a mess.

It's same as having units tests which one depends on the previous one.

Just be aware.