Using a Switch Component in React Router

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

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

React <Router /> can include many nested routes that render inclusively, and what does “render inclusively” mean? It just means that whenever a react route’s path matches the url path, the router will render the route’s component.

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 react components will all render. This is because all 3 routes include / in their paths. The react <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 do not 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(page) route. So when we visit  or login, only the Login react component will now render on the page.

So what exactly is the edge of using <Switch />? The react <Switch /> component will only render the first route that matches or includes the path. Once it finds the first route that matches the path, it will not look for other matches. Not only that, it allows for nested routes to work properly, which is something that react <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')
   );

The  above example, when the user goes to /login, only the  Login(page) react component will now be rendered. It is also main to note that an exact path can and should still be utilized for routes that are inside a react <Switch />. An exact path for a route that is inside a react  <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(page) would find the Home (page) component rendered on the web page.