React Router

What is Routing?

In React, routing involves navigating between various views or pages in a single-page application (SPA). Typically, React employs a routing library (with React Router being the most commonly used) to handle these navigations, enabling you to set up different “routes” and link them to specific components that will be displayed when a user accesses a certain URL.

React Router

React Router enables smooth navigation between various views or “pages” without the need for a page refresh, ensuring a quick and seamless experience for your users.

React Router is a widely-used library that facilitates dynamic routing in React apps. It provides the capability to:

Manage navigation in a single-page application (SPA).
Map URLs to components and render the correct component based on the URL.
Manage navigation actions such as clicking on links or route changes triggered by code.

React Router simplifies the process of handling routes and changes in the URL. Rather than depending on conventional server-side routing methods, React Router manages routing on the client side, ensuring a seamless experience where the page doesn’t require a full reload.

Setting Up React Router

Step 1: Install React Router

Before we begin utilizing React Router, it’s necessary to install it in our project. You can accomplish this using npm or yarn.

Execute the command below within your project directory:

npm install react-router-dom

This will install the react router in our project.

Step 2: Set Up the Router

Once you’ve installed React Router, it’s necessary to enclose your application with the BrowserRouter component. This component will handle the routing context and monitor the current URL.

In your src/index.js (or src/index.tsx for TypeScript), wrap your root component with the BrowserRouter


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

This code establishes a React application and incorporates React Router to manage routing (i.e., page navigation) within a single-page application (SPA). Let’s analyze the function of each component of the code.

ReactDOM.render: Renders the React app into the DOM.
BrowserRouter: Provides routing capabilities by using the browser’s history API.
App: The root component of your React app, which will contain the content of the app and route definitions (if you’re using React Router).

Step 3: Define Routes

We can now specify distinct routes for different pages in our application after configuring the router. The Route component within a Switch component is used in React Router to define routes.

Open your App.js (or App.tsx for TypeScript) and start by importing the necessary components:


import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

Next, define your routes using the Switch and Route components. Only one route is presented at a time.


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

// Dummy components
const Home = () => <h2>Home Page</h2>;
const About = () => <h2>About Page</h2>;
const Contact = () => <h2>Contact Page</h2>;

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Step 4: Create Component Pages

Let’s now construct the Home, About, and Contact sections of each page. Each component can be made in an own file, as shown here:

Home.js


import React from 'react';
function Home() {
  return Welcome to the Home Page!;
}
export default Home;

About.js


import React from 'react';


function About() {
  return This is the About Page!;
}
export default About;

Contact.js


import React from 'react';
function Contact() {
  return This is the Contact Page!;
}
export default Contact;

Step 5: Navigation Between Pages

Now that everything is configured, you can use the Link component to move between the pages of your application. This part creates a clickable link that modifies the URL without causing the page to reload.


<nav>
  <ul>
    <li>
      <Link to="/">Home</Link>
    </li>
    <li>
      <Link to="/about">About</Link>
    </li>
    <li>
      <Link to="/contact">Contact</Link>
    </li>
  </ul>
</nav>

React Router will render the relevant component based on the URL and route configuration when you click on any of the links.

Step 6: Programmatically Navigating Between Pages

Sometimes, you may want to navigate between pages programmatically in response to an event (like a form submission). React Router provides the useHistory hook to achieve this.

First, import react-router-dom’s useHistory:

import { useHistory } from 'react-router-dom';

The history object can then be accessed by calling useHistory() inside your component:


function MyComponent() {
  const history = useHistory();
  const handleSubmit = () => {
    // Navigate to the About page
    history.push('/about');
  };


  return (
    
  );
}

In this instance, the user will be programmatically redirected to the About page when clicking the button.

Step 7: Nested Routing

Nestled routing is another feature that React Router offers, enabling you to build routes within existing routes. When making layouts or more intricate page structures, this is helpful.

You could, for instance, include nested routes within the About page:


function About() {
  return (
    <div>
      <h1>About Us</h1>
      <nav>
        <ul>
          <li>
            <Link to="/about/growth">Our Growth</Link>
          </li>
          <li>
            <Link to="/about/team">Our Team</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route path="/about/growth" component={Growth} />
        <Route path="/about/team" component={Team} />
      </Switch>
    </div>
  );
}

function Growth() {
  return <h2>Here are our achievements...</h2>;
}

function Team() {
  return <h2>Meet our awesome team!</h2>;
}

In this configuration, by clicking on the “Our Mission” or “Our Team” links, further information will be displayed on the same page, but at other nested routes.

Conclusion

A strong and adaptable tool for controlling navigation in your React apps is React Router. It guarantees that the page never needs to reload while assisting you in creating dynamic, single-page apps with various views.

We went over how to construct routes, set up routing in a React application, navigate programmatically, and even use nested routes for more intricate structures in this article. React Router makes navigation simple, which results in web apps that are quicker and more fluid.

Request more information

React Router