Using a Switch Component in React Router

#react

Routing in React can be a little difficult for those who are new to React. It is pretty different from the routing system used in Ruby on Rails because it is now done completely on the client. The client is responsible for all routing in React.

When working with routing in React, I came upon the <Switch /> component and noticed how people were using that in place of <Router />. This made me delve a little further into the differences between the two and why using <Switch /> can be very helpful and the preferred component between the two.

<Router /> can include many nested routes that render inclusively. And what does "render inclusively" mean? It just means that whenever a route's path matches the url path, the router will render the route's component. Let's take a look at the below example.

   ReactDOM.render((
       <Router>
         <Route path="/" component={Home} />
         <Route path="/login" component={Login} />
         <Route path="/explore" component={Explore} />
       </Router>),
       document.getElementById('root')
   );

In this example, when a user goes the url path /, the Home,Login, and Explore components will all render. This is because all three routes include / in their paths. The <Route /> component is handy in this way in that it can render certain components all the time, such as the header, nav bar, and other components that should appear on every page of a website.

One way to ensure that routes don't render inclusively is by adding "exact paths" to routes.

   ReactDOM.render((
       <Router>
         <Route path="/" component={Home} />
         <Route exact path="/login" component={Login} />
         <Route path="/explore" component={Explore} />
       </Router>),
       document.getElementById('root')
   );

Above, I added an exact path to the login route. So when we visit /login, only the Login component will now render on the page.

So what exactly is the advantage of using <Switch />? The <Switch /> component will only render the first route that matches/includes the path. Once it finds the first route that matches the path, it will not look for any other matches. Not only that, it allows for nested routes to work properly, which is something that <Router /> will not be able to handle.

   ReactDOM.render((
       <Switch>
         <Route exact path="/" component={Home} />
         <Route path="/login" component={Login} />
         <Route path="/explore" component={Explore} />
       </Switch>),
       document.getElementById('root')
   );

In the example above, when the user goes to /login, only the Login component will now be rendered. It is also important to note that an exact path can and should still be utilized for routes that are inside a <Switch />. An exact path for a route that is inside a <Switch /> makes sure that the route matches exactly the path that is specified. For example, without the exact path for / above, a user who goes to /login would find the Home component rendered on the web page.