Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 998 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Conditionally Render a React Router v4 Route with the Switch Component

1:15 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Here in our application, we've got a series of links, each pointing to routes that we've defined. We can go ahead and go to the Home, About, Contact, and everything's working just fine. Let's say that I want to create another route here that is going to be dynamic.

I'm going to pass in itemID, break this out a little bit. What I want to do is, out of the match data, I want to go ahead and output item, and then we'll draw up the match.params.itemID right there. We're here on our Home path, everything's fine.

I'm going to go to About, and what we'll see is that the About route is rendering, but the itemID route is rendering as well, because it's considering the About parameter in the URL to be our itemID. To solve that, we can bring in the switch component. Then we'll wrap our routes in the switch component, which will only render the first route that is a match.

Now if we go to our home, everything's working, About, everything's working, and Contact, everything is working. If we want to go ahead and go to itemID 123456, we have our itemID.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?