React Router DOM v6 Dynamic Back Button Tutorial

Sometimes the need arises to go back to the previous route or page in React js application. Fret not! In React, you can easily travel back to the last page or URL you visited earlier.

In this tutorial, we will learn how to build a dynamic back button in React. We will use the React Router DOM v6 library to create the back button in React.

React Router DOM allows you to integrate dynamic routing in React web and mobile applications. It resembles the primitive routing paradigm, which manages the routing within a configuration outside an application.

Router DOM offers component-based routing based on the requirements of the app. To implement the back button in React, we will use Router DOM’s useNavigate hook and profoundly use it to go back to the previous route in React js application.

A back button is used to go back and forth in a web app. Let’s check out how to get the previous route using react-router v6.

Build React App

To build a new React application we have to execute the given below command from the terminal. Make sure to run the following command.

npx create-react-app my-react-app

Next, move into the project directory.

cd my-react-app

Install React Router DOM v6

We have to install the latest version of react-router-dom in order to build the routing ecosystem in React.

npm install react-router-dom

Make Component Files

Head over to src/ directory, then make the features/ folder. Then, you have to create the Home.js and Product.js files.

Add code into the features/Home.js file:

import React from 'react'

function Home() {
  return (
    <div></div>
  )
}

export default Home

Insert code into the features/Product.js file:

import React from 'react'

function Product() {
  return (
    <div></div>
  )
}

export default Product

Create React Router Back Button

Head over to src/ directory, look for App.js file. In this file you have to import the components, react router APIs, and create the routes.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

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

export default function App() {
  const navigate = useNavigate();

  return (
    <div className="container mt-4">
      <h2 className="mb-4">React Dynamic Back Button Example</h2>
      <button className="btn btn-dark me-2" onClick={() => navigate(1)}>
        Go Forward
      </button>

      <button className="btn btn-danger" onClick={() => navigate(-1)}>
        Go Back 1 Page
      </button>

      <div className="mt-4">
        
          <ul className="list-group">
            <li className="list-group-item">
              <Link to="/home">Home</Link>
            </li>
            <li className="list-group-item">
              <Link to="/product">Product</Link>
            </li>
          </ul>
        

        <Routes>
          <Route path="/product" element={<Product />} />
          <Route path="/home" element={<Home />} />
        </Routes>
      </div>
    </div>
  );
}

Wrap App Component with BrowserRouter

We need to wrap the app component using the BrowserRouter Api; for that you have to enter into the src/index.js file. Ensure that you added the code into the file.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
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>
);

View App on Browser

Let us check out the app on the browser; hence, run the given command to start the React development server.

npm start

Here is the url that you can use to see the app on the browser.

http://localhost:3000

React Router DOM v6 Dynamic Back Button Tutorial