How to Create Custom Back Button with React Router?

In this tutorial, we will learn how we can create a custom back button with the help of the react-router npm package and how you can implement it in your react application.

The back button functionality will allow you to take back to the previous page using the navigation. As you know website or application could have more than one page and when the user clicks on nav items, the page will redirect to that specific page. But when you want to go back to the previous page where you come from you have to click on the back button.

All the browsers have their own back and next button but in this tutorial example, we will see how to create and use a custom back button in react application using the react-router package.

React Router makes it easy to add advanced routing capabilities like URL fragments and redirects to your React app. It has built-in support for router guards (to prevent actions from being executed when certain conditions are met), lazy loading, client-side persistence of previous navigation steps, and more.

Create New Project

Create a new react application using the following npx command in your terminal. You can also see a detailed guide on how to create a new react application.

npx create-react-app react-project

If you have already installed react project then you can skip this step and continue on the following steps.

Create New Components

Now after creating a react application, the next step is to create a new 2-3 function components such as Home.js, About.js, and Contact.js.

These components we will use to set up routes to navigate from one component to another component. Let’s create function components for them.

Home.js

import React from 'react'
function Home() {
  return (
    <div>Home page</div>
  )
}
export default Home

About.js

import React from 'react'
function About() {
  return (
    <div>About page</div>
  )
}
export default About

Contact.js

import React from 'react'
function Contact() {
  return (
    <div>Contact page</div>
  )
}
export default Contact

Install React Router DOM Package

Now let’s install the react-router DOM package using the following command. React Router is a javascript library for routing in React. It allows you to define multiple routes, with parametrized URLs and matching functionality.

npm install react-router-dom

See Also: How to Install react-Router and Use It?

After installation, it is ready to import into components and use it.

Add Back Button with React Router

To add a custom back button in react application for this tutorial, we will use the App.js file to add the routes and navigation links.

First import the Routes, Route, useNavigate, and Link components from react-router-dom package in the App.js file at the top and then import the Home, About, and Contact components.

import { Routes, Link, Route, useNavigate } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

function App() {

  const navigate = useNavigate();

  return (
    <div classname="container">

      <h2>React Custom Back Button with React Router</h2>

      <div classname="button-wrapper">
        <button classname="btn next-btn" onclick="{()" navigate>
          Next
        </button>
        <button classname="btn prev-btn" onclick="{()" navigate>
          Previous
        </button>
      </div>

      <ul classname="navigation-list">
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>

      <routes>
        <Route path="/" element={<home></home>} />
        <Route path="/about" element={<about></about>} />
        <Route path="/contact" element={<contact></contact>} />
      </routes>

    </div>
  );
}
export default App;

In the above code, first, we have created two buttons for navigation to the next and previous pages. And you see we have used the useNavigate() method of react-router. It takes the history of routes.

Then we write the list of navigation links that we will use to navigate from one to another page. In the last, we have defined the routes to render the specific component based on the routes link.

See Also: How to Create Public and Private Routes with React Router?

Implement React Router DOM

In the above, we have done all the required things, now time to implement a very important step in order to work react-router.

To make it work we have to configure the BrowserRouter component in the main index.js file, so react uses this react-router package to load and render the components.

Import the BrowserRouter component from the react-router-dom package and then wrap your application component in it like the following example.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
    <browserrouter>
      <App />
    </browserrouter>
);

That’s it!!!

Now you can run the npm start command and test how it will work in your react application.

If you have any questions please do let me know in the comment section, and I will respond to you as soon as possible.