The Switch component

The Switch component

Sometimes we want to show only one route from a group of routes. Of course we can specify the “exact” path and thus ensure that no route can be depicted accidentally as a partial match, but what if we want to group routes and select to show ONLY the first match?

 Then we can use the <Switch> component and nest routes inside of it. The nested routes are going to be evaluated one by one, and once there is a match, it will be the selected route. Then the evaluation of the other remaining routes stops. 

In this example without having the switch, anytime we were either on the /home or on the /different we would render the corresponding component AND the <ExampleOne /> as well (due to partial matching). With the Switch component we render ONLY the first match. 

Be careful! In our case, and because we have no exact keyword, regardless of which one of the three routes is the active route (the current url), we will depict always the <ExampleOne /> component. 

Why?  Because since these three routes are inside a switch keyword, the first match will be depicted. Regardless if we have clicked on the link that gets us to just /, or to /home, or /different. The first (with just a /), evaluates to true due to partial match. (maybe you want to put an exact keyword there to avoid this issue). The others will not be evaluated at all!