How to Create Custom Back Button with React 18 Router DOM v6

A back button takes the back user to the previous page he visited earlier. An application is a conjugation of various pages; a user can navigate from one page to another page using routes.

But, many times, we may need a back button that allows users to go one step back.

In this article, we will cover the following things:

How to create a custom back button in React.

How to add a back button in React using React Router DOM v6 module.

The basic setup of function components for creating pages and routes in React.

How to use and set up bootstrap UI in React.

React Router DOM helps you form dynamic routing in React web applications.

It will help you create navigate back button in React as well.

On the other hand, we will ascertain the basic usage of Bootstrap in React to create the basic layout for our back button functionality.

Set Up New Project

If you already have the React project ready, go on to the next step. Else, run the command for installing a new React project.

After the installation process is done, jump into the project’s root:

npx create-react-app react-blog-app

cd react-blog-app

Build New Components

We will be forming two function components, Home and Profile. These components will help us to create routes that will help us go forward and previous in React.

Create components/Home.js folder and file, next update with given code:

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

Create components/Profile.js folder and file, then update with following code:

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

Add Router DOM in Router

If you are well versed with node, npm, and command line, installing React Router DOM should be a breeze.

npm install react-router-dom --legacy-peer-deps

Add Back Button in React

If any you want to navigate from www.yourdomain.com/one to www.yourdomain.com by clicking on the back to button.

Open the App.js component, update the file with given code.

Import all the components at the top.

Import Routes, Link, Route, and useNavigate from the “react-router-dom” package.

Create routes and apply back and forward button that helps you go back and forward one page in React.

import Home from "./components/Home";
import Profile from "./components/Profile";
import { Routes, Link, Route, useNavigate } from "react-router-dom";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
function App() {
  const nav = useNavigate();
  return (
    <div className="container mb-5">
      <h2>React Custom Back Button Example</h2>
      <div className="list-group mt-4">
        <button className="btn btn-primary mb-3" onClick={() => nav(1)}>
          Go Onward
        </button>
        <button className="btn btn-dark" onClick={() => nav(-1)}>
          Back to 1 Page
        </button>
      </div>
      <ul className="list-group">
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/profile">Profile</Link>
        </li>
      </ul>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </div>
  );
}
export default App;

Implement Router DOM in React

In order to work Router DOM in React, make sure to add BrowserRouter API in index.js file as suggested below.

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(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Test Back Button

As you can see, we have given a single command below. This will start the server after executing, hence go ahead and run the command and test the functionality.

npm start

http://localhost:3000

Conclusion

This tutorial taught us how to build a dynamic custom back button in React.

Not just that, but we also learned how to create a forward button in React.

We added the back button in React function component; similarly, we implemented the forward button in the functional component using the useNavigate API.

The useNavigate hook returns a function that lets you navigate programmatically.