Introduction to React Router

React Router is a powerful tool that allows you to connect the URL of your React app with its corresponding components. It is considered the go-to routing library for React and is widely used in many projects.

Installation

To install React Router using npm, run the following command:

npm install react-router-dom

Components

The main components you will work with in React Router are:

• BrowserRouter: This component serves as the wrapper for all the Route components in your app.
• Link: The Link component is used to create links to different routes in your app.
• Route: The Route component is responsible for rendering the components associated with specific routes.

BrowserRouter

To use React Router in your app, you need to wrap your app with the BrowserRouter component. Here’s an example of how to do it:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <Router>
    <div>{/* Your app components go here */}</div>
  </Router>,
  document.getElementById('app')
);

Note that the BrowserRouter component can only have one child element, so you should wrap all your app components inside a <div>.

Link

The Link component allows you to create links to different routes in your app. Here’s an example:

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

ReactDOM.render(
  <Router>
    <div>
      <aside>
        <Link to="/dashboard">Dashboard</Link>
        <Link to="/about">About</Link>
      </aside>
      {/* Your app components go here */}
    </div>
  </Router>,
  document.getElementById('app')
);

Route

The Route component is where you define what components should be rendered for each route. Here’s an example:

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

const Dashboard = () => (
  <div>
    <h2>Dashboard</h2>
    {/* Dashboard component content */}
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
    {/* About component content */}
  </div>
);

ReactDOM.render(
  <Router>
    <div>
      <aside>
        <Link to="/">Dashboard</Link>
        <Link to="/about">About</Link>
      </aside>
      <main>
        <Route exact path="/" component={Dashboard} />
        <Route path="/about" component={About} />
      </main>
    </div>
  </Router>,
  document.getElementById('app')
);

In this example, the Dashboard component will be rendered when the route is /, and the About component will be rendered when the route is /about. Note the use of the exact attribute to ensure that the route matches exactly.

Access the location data inside a rendered component

You can access the current location data inside a rendered component using the useLocation hook:

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

function Post() {
  const location = useLocation();

  console.log(location.pathname); // '/'
}

Programmatically change the route

You can programmatically change the route inside a rendered component using the useHistory hook:

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

function Post() {
  const history = useHistory();

  history.push('/post/new');
}

Match multiple paths

To match multiple paths with a single route, you can use a regular expression in the path attribute:

<Route path="/(about|who)/" component={Dashboard} />

Inline rendering

Instead of assigning a component to the component property of a Route, you can use the render prop for inline rendering:

<Route
  path="/(about|who)/"
  render={() => (
    <div>
      <h2>About</h2>
      {/* About component content */}
    </div>
  )}
/>

Match dynamic route parameter

To retrieve data from a dynamic React Router route, you can refer to this tutorial.