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.
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.
Install React Router DOM Package
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.
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.
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.