Routing in React JS with Example

In this article, you will learn how to implement routing in React JS. We will develop the following functionalities:

  1. Create multiple React components.
  2. Add routes to each component.
  3. Allow users to navigate between different pages.
reactnavigation-output
Multi-page Routing in React JS
Skills Based Routing Chats in Sales...
Skills Based Routing Chats in Salesforce

1. Install react-router-dom npm package

React is a JavaScript library, not a framework hence many of the functionalities including routing aren’t built-in and need to be added through npm packages.

We will install the “react-router-dom” package to add routing functionality to the project. With the terminal command below:

npm i react-router-dom

// For projects configured with yarn 
yarn add react-router-dom

Once the package is successfully installed, we can verify the dependencies from the package.json of the project.

router-package.json
Dependencies in package.json

2. Create React Components for home, about and blog

We will create a React component for the Home page which displays a heading with the text “Home Page Body“.

import React from "react";

//Homepage Component
function Home() {
  return (
    <div className="app">
      <h1>Home Page Body</h1>
    </div>
  );
}

export default Home;

Similarly, two other components for the About and blog page is created.

3. Wrap App componenent with <Switch/> and <Router/>

To configure the routes, all the required components are imported from “react-router-dom” package. We enclose the whole App component in <Router/> which enables all the functionality of “react-router-dom” within it.

Further, <Switch/> renders the first route that matches the current browser URL.

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

const App = () => (
  <Router>
    <Switch>

    </Switch>
  </Router>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

4. Declare Routes for the components

Now we need to configure routes for every component using the <Route/> tag. The <Route/> tag accepts the path of the route and renders the component wrapped around it. Ie, <Home/> component is rendered for exact path “/“, <About/> component is rendered for any path starting with “/about“, etc.

// Import components
import Home from "./Home";
import About from "./About";
import Blog from "./Blog";

const App = () => (
  <Router>
    <Switch>
      {/* Exact match to avoid 
          overriding other routes */}
      <Route path="/" exact>
        <Home />
      </Route>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/blog">
        <Blog />
      </Route>
    </Switch>
  </Router>
);

Once Routes are configured, the required component is rendered based on the browser URL. However, to allows users to switch between components by click, we will add <Link/> tag. When users click on the text enclosed by <Link/>, the browser directs to the URL provided in the to attribute.

<div className="nav-bar">
  <Link to="/"> Home </Link>
  <Link to="/about"> About </Link>
  <Link to="/blog"> Blog </Link>
</div>

Final Solution Code

App.js

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

// Import components
import Home from "./Home";
import About from "./About";
import Blog from "./Blog";

import "./styles.css";

const App = () => (
  <Router>
    <div className="nav-bar">
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/blog">Blog</Link>
    </div>
    <Switch>
      {/* Exact match to avoid 
          overriding other routes */}
      <Route path="/" exact>
        <Home />
      </Route>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/blog">
        <Blog />
      </Route>
    </Switch>
  </Router>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Home.js

import React from "react";

//Homepage Component
function Home() {
  return (
    <div className="app">
      <h1>Home Page Body</h1>
    </div>
  );
}

export default Home;

About.js

import React from "react";

//About Component
const About = () => {
  return (
    <div className="app">
      <h1>About Page Body</h1>
    </div>
  );
};

export default About;

Blog.js

import React from "react";

//Blog Component
function Blog() {
  return (
    <div className="app">
      <h1>Blog Page Body</h1>
    </div>
  );
}

export default Blog;

styles.css

.app {
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  height: 100vh;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  background-color: #f8f9fd;
}

.nav-bar {
  display: flex;
  gap: 35px;
  font-size: 18px;
  padding: 20px;
}