React Router Switch Example

React Router Switch is a component of React Router library. Switch is used for routing, basically creating menu navigation and loading different components based on the path.

The most fundamental property of the React Router Switch component is it will render the first child route that matches the location.

Enough of boring theoretical jargon, let’s build a practical example showcasing the React Router Switch functionality.

Let’s start with our customary import statements.

import React from 'react';

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

I imported Switch component from react-router-dom library.

Let’s now create Switch statements loading various components based on paths.

 <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/service">
            <Services/>
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>

Here I have 3 paths, defined, /about, /service and /. In the /about path, I am calling the <About/> component. Similarly I am calling <Services/> component in /service path and <Home/> component in base path. These are just dummy components that I would just create.

Let me also define menu navigation for these paths so that the user can easily click on about, service, or home links.

 <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About Me</Link>
            </li>
            <li>
              <Link to="/service">Services</Link>
            </li>
          </ul>
        </nav>

Remember both nav, as well as React Router Switch components, need to be wrapped around by a Router component as shown below.

 
 export default function App() {
  return (
    
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About Me</Link>
            </li>
            <li>
              <Link to="/service">Services</Link>
            </li>
          </ul>
        </nav>

       
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/service">
            <Services/>
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

Let us implement Home, About and Services components which are called when user clicks on specific Routes.

function Home() {
  return <h2>Holy Cow Home Page</h2>;
}

function About() {
  return <h2>I am Anil. An awesome react developer. :) </h2>;
}

function Services() {
  return <h2>I provide amazing services at a very high cost. </h2>;
}

If all goes well, then when you run your app, you should be able to get something like this below in your browser.

Here is the complete source code for your reference.

import React from 'react';

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


export default function App() {
  return (
    
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About Me</Link>
            </li>
            <li>
              <Link to="/service">Services</Link>
            </li>
          </ul>
        </nav>

       
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/service">
            <Services/>
          </Route>
          <Route path="/">
            <Home />
          </Route>
		  
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Holy Cow Home Page</h2>;
}

function About() {
  return <h2>I am Anil. An awesome react developer. :) </h2>;
}

function Services() {
  return <h2>I provide amazing services at a very high cost. </h2>;
}

React Router Switch Default Route

Sometimes we have a requirement of user to go to a default page if the user has not specified any of the path mentioned in Switch Route paths. Then you have 2 options. Either you just specify the / path. That way any of the unspecified paths/locations will go to Home component being put in that Route.

 <Route path="/">
   <Home />
 </Route>

The 2nd and more preferable and explicit way is to remove this Route and put a Route with no path specified and put a NothingMatching component in it.

 <Route >
   <NothingMatching />
 </Route>

Two things to remember here.

• You must put only one of these Routes in your switch statement.
• NothingMatching is not a component that comes from the react-router library. You need to create that function component.

This is very helpful and can act as catch all page in case user goes to unspecified pages. This can be used an ideal technique for your 404 NOT Found pages as well as if you want to redirect the user to your home page.

One more interesting feature many folks ask about Switch is can we create React Router Switch inside Switch. The answer to that question is YES. You can keep creating switch inside switch inside switch and keep doing that till your menu structure becomes a crazy nested menu. Remember the movie Inception, dream in a dream in a dream. 🙂