Why switch keyword used in React Router v4 ?

ReactJS is a javascript library that is used to build single-page applications (SPA). React by default does not provide the routing features. We can implement routing in ReactJS projects using React Router. React Router is a library that enables navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL. 

In this article, we will see how routing works in React Router and how we can take advantage of the Switch component provided by React Router.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app SWITCH_DEMO_APP

Step 2: After creating your project folder, move to it by using the following command.

cd SWITCH_DEMO_APP

Step 3: After creating the React application, Install the React Router as a dependency using the following command.

npm install --save react-router-dom

Project Structure: The project structure after deleting some unrequired files is shown in the picture mentioned below.

Example 1: Routing without Switch component - When we perform routing using React Router, whenever a page is rendered the URL path is being matched to each route. All the route paths that match the given URL path are rendered. The content of the App.js file is mentioned below. In this file, we have created four div, each containing a Link Component provided by React Router. We have also created five Routes i.e. home, profile, products, products/shoes, and a Route with a path equal to a * that is a wild card that matches with every URL path. 

How does path matching work in React Router?

React router takes the relative URL and matches it with each path provided in the Route component. The route matching is done in a way that if a part of this relative URL is matched then that Route is rendered. For example, if the relative URL is /products/shoes then paths /, /products, and /products/shoes match the URL and all three routes are rendered but /profile does not match the URL. 

Filename: App.js

import React, { Fragment } from "react";
import { BrowserRouter as Router, Link, 
    Route } from "react-router-dom";

const Home = () => {
  return <h2>Home</h2>;
};

const Profile = () => {
  return <h2>Profile</h2>;
};

const Shoes = () => {
  return <h2>Shoes</h2>;
};

const Products = () => {
  return <h2>Products</h2>;
};

const App = () => {
  return (
    <Fragment>
      <Router>
        <div>
          <Link to="/">Home</Link>
        </div>
        <div>
          <Link to="/products">Products</Link>
        </div>
        <div>
          <Link to="/products/shoes">Shoes</Link>
        </div>
        <div>
          <Link to="/profile">profile</Link>
        </div>
        <Route path="/">
          <Home />
        </Route>
        <Route path="/profile">
          <Profile />
        </Route>
        <Route path="/products">
          <Products />
        </Route>
        <Route path="/products/shoes">
          <Shoes />
        </Route>
      </Router>
    </Fragment>
  );
};

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Image showing the Webpage when we click the 'shoes' link.

Example 2: Routing using Switch Component - When we wrap our routes inside the Switch component then it makes sure that only one route is rendered at a time. So in this case, the first route that matches the relative URL with the paths of each Route component and only renders the first path that matches the part of the relative URL as we have discussed above. 

Syntax: Syntax to use the Switch component is mentioned below.

<Switch>
  <Route exact path='/'>
      <A />
  </Route>
  <Route path='/b'>
      <B />
  </Route>
  <Route exact path='/c'>
      <C />
  </Route>
  <Route path='/d'>
      <D />
  </Route>
</Switch>

If two routes match with each other then we can use the exact prop as shown below.

<Route exact path='/'>
    <Home />
</Route>

By using this exact prop, we make sure that the home route is only rendered when the relative URL exactly matches /. Now if the relative URL is /profile then only the profile route is rendered doesn't matter if the profile Route is below /  route in the code. The content of the App.js file when we use the Switch component is mentioned below.

Filename: App.js

import React, { Fragment } from 'react';
import { BrowserRouter as Router, 
  Link, Route, Switch } from 'react-router-dom';

const Home = () => {
  return <h2>Home</h2>;
};

const Profile = () => {
  return <h2>Profile</h2>;
};

const Shoes = () => {
  return <h2>Shoes</h2>;
};

const Products = () => {
  return <h2>Products</h2>;
};

const App = () => {
  return (
    <Fragment>
      <Router>
        <div>
          <Link to='/'>Home</Link>
        </div>
        <div>
          <Link to='/products'>Products</Link>
        </div>
        <div>
          <Link to='/products/shoes'>Shoes</Link>
        </div>
        <div>
          <Link to='/profile'>profile</Link>
        </div>
        <Switch>
          <Route exact path='/'>
            <Home />
          </Route>
          <Route path='/profile'>
            <Profile />
          </Route>
          <Route exact path='/products'>
            <Products />
          </Route>
          <Route path='/products/shoes'>
            <Shoes />
          </Route>
        </Switch>
      </Router>
    </Fragment>
  );
};

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Image showing the Webpage when we click the 'shoes' link when using Switch component