Hooks Of React Router 5+ Tutorial

Friend, in this tutorial, we will learn about hooks of React Router 5+. We will also get to know about using useParams, useLocation and useHistory hooks.

Since we know that Single Page Applications (SPA) is a trending option nowadays. React offers to build these SPAs in an easy and flexible manner.

Moreover, React is becoming one of the most likeable options among the other frontend frameworks due to its core functionalities. React Router Hooks look quite attractive for building routing mechanism in React apps.

Routing work becomes unexpectedly easy with these tools called React Router Hooks.

So, throughout this guide, we will come to know about four amazing Hooks of React Router with the help of which we can implement routing function in the React apps.

It is worth remembering that to deal with Hook, we should be working with React 16.8+ version, either built-in or third-party hooks, including the router hooks.

How To Implement Router Hooks In React Applications

Follow the below-given steps for implementing the Router Hooks in an easy way in React apps.

Step 1- Install React Application

Like we need a war ground for fighting a battle, similarly, we need a React web app ready at our working machine for checking how the React Router Hooks work.

So, run the following command in order to create such an app:

npx create-react-app react-router-hooks-tutorial

Next, we move to the project root:

cd react-router-hooks-tutorial

Now, we have to run the app in the browser:

npm start

 

Step 2- Install React Router Package

We can install the React Router Package in two ways- by npm or yarn. Since we deal with the web application here, so we will run the below-given command next:

npm install react-router-dom

Further, we have to add the code in the src/App.js file.

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

export default function App() {
  return (
    
  );
}

 

Step 3- Primordial Method Of React Routing 5/4

Before we create a path, we would need to import the component and then declare the component name within the Route component.

<Route path="/" component={Home} />

As soon as, we visit the path=”/”, at that time, the defined component will be accessed.

We can access the Routing props by defining some other props such as history, match and location. In some cases, we may need to add additional props. So, just define render prop to declare the properties.

<Route path="/" render={({ match }) => <Products match={match} mine={true} />}>

 

Step 4- Hooks In React Router 5

So, we know that we don’t have to pass props deliberately. Thanks to the metamorphosis done by the React team, we can add much more flexibility with extra props to the component you need to render.

Below is the example of React Router with Hooks API.

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

Now, here arises one question. We haven’t declared the props, so how can we perfectly align the match, location or history to access the Router Hooks props.

 

Step 5- The useHistory Hooks

The useHistory Hook gives us full access to the history object or prop via React Router.

Here, we import the useHistory Hook module from ‘react-router-dom’ package.

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

function Products() {
  const history = useHistory();
  return <button onClick={() => history.push('/products')}>Products</button>;
}

We can use history object with push, replace types of methods.

 

Step 6- The useLocation Hook

Firstly, we have to import the use history hook for using it, the usehistory hook gives access to the history object.

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

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

  useEffect(() => {
    const currentPath = location.pathname;
    const searchParams = new URLSearchParams(location.search);
  }, [location]);

  return <p>Product</p>;
}

 

Step 7- useParams In React

If we have to access the router params from the URL parameter and access the search parameter in the URL.

For this, we can import the useParams, Route service from ‘react-router-dom’ package.

import { useParams, Route } from 'react-router-dom';

function Product() {
  const { name } = useParams();
  return <p>{name}</p>;
}

function Home() {
  return (
    <>
      <nav>
        <Link to={`/product/shoes`}>Shoes</Link>
      </nav>
      <main>
        <Route path="/product/:tshirts">
          <Product />
        </Route>
      </main>
    </>
  );
}

 

Summary

So, friends, we reach at the conclusion of this guide in which we have got the knowledge about useParams, useLocation and useHistory hooks. Hope you have well understood the concept and implementation in React applications.