React Tutorial- How To Create Custom Back Button With React Router DOM v6

In this React tutorial, we will learn how to add a back button in React using React router DOM v6 module. React router DOM helps us form dynamic routing in React Web Apps. It will help us create navigate button in React as well.

 

Let’s learn it step by step.

How To Create Custom Back Button With React Router DOM v6

Step 1- Set Up New React Project

The primary step is just to set up a new React app by using the below command:

npx create-react-app react-blog-app

cd react-blog-app

 

Step 2- Build New Components

We will have to form two components: Home and Profile. These components are quite mandatory since they help us create routes that will help us go forward and previous in React apps.

Now, we create the components/Home.js folder and file after which we have to update the given code:

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

 

Afterward, we will create the components/Profile.js folder. After that, we have to update the below code:

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

 

Step 3- Add Router DOM

If you are well versed with Node, NPM and command line, then installing React Router DOM is just a click ahead:

npm install react-router-dom

 

Step 4- Add Back Button In React

If we need to navigate from www.yourdomain.com/one to www.yourdomain.com by clicking on the back button:

We open the App.js component and update the following code.

Then, we import all the components at the top.

Further, we will import Routes, Link, Route and useNavigate from the “react-route-dom” package.

Then, we will create routes and apply back and forward button that helps us 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;

 

Step 5- Implement Router DOM In React

In order to work Router DOM in React, we have to make sure to add BrowserRouter API in the index.js file as given 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>
);

 

Step 6- Test The Back Button

As we can see, we have given a single command. This will start the server after running the below command:

npm start

http://localhost:3000

 

 

Conclusion

In this React tutorial, we have learned how to build a dynamic custom back button in React. We have also seen how to create a forward button in React.

We have added the back button in React Function Components. We have also implemented the forward button in the functional component using the useNavigate API.

 

Thanks