Understanding React Router

Introduction

React Router is a powerful tool that allows you to handle routing in your React applications. If you are not familiar, routing is the ability to move between different parts of an application when a user enters a URL or clicks an element (like a link) within the application.

In this tutorial, we will explore the basics of React Router and how to implement it in a simple React application.

Prerequisites

Before we begin, make sure you have the following installed on your machine:

Node.js and npm (Node Package Manager)
A basic understanding of React

Installing React Router

To get started, you need to install React Router. Run the following command in your terminal:

npm install react-router-dom

Basic Components of React Router

React Router provides a few components that help us to manage our routes:

BrowserRouter: This is a component that uses the HTML5 history API to keep your UI in sync with the URL.
Route: This component is used to render UI when a particular path matches the current URL.
Link: It's a replacement for the <a> tag. This component allows navigation around the application.

Let's see how we can use these components in a simple application.

Creating a Simple Router

To keep things simple, we will create a basic application with three pages: Home, About, and Contact. Each page will be a component.

Let's start by creating the components:

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

function About() {
  return <h2>About</h2>;
}

function Contact() {
  return <h2>Contact</h2>;
}

Now that we have the components, let's set up the router:

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

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>

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

There's a lot going on here, so let's break it down:

We're importing the components we need from react-router-dom.
We wrap our entire application in the Router component. This is what hooks into the history API.
We provide links to the different parts of our application using the Link component. Notice that we use the to prop to define where each link should go.
We use the Route component to render different components based on the current path. Notice that we use the path prop to define which path should render which component. The exact prop is used to ensure that the component only renders for the exact path.

Conclusion

That's the basic idea of React Router! There's a lot more you can do, such as nested routing, URL parameters, programmatically navigating, etc. But for now, you should have a good foundation for how to use React Router in a simple application. Happy coding!

Understanding React Router

Introduction​

Prerequisites​

Installing React Router​

Basic Components of React Router​

Creating a Simple Router​

Conclusion​