This article will show you how to create a Back button with React Router. Here are some ways to do it with examples to make it easier for readers to understand. Let’s go into detail how to use useHistory() and useNavigate().
React Router hook
The lightweight library React Router makes it possible to manage and handle routing for your React application.
The Route renders methods are one of React Router’s most notable features. It gives your component access to the matches, history, and location of props. You can use these props to navigate your React app and pass data from the URL to the component.
A few hooks in React Router let you access the router’s state and navigate within your components. Kindly note: To use the following hooks, you must use React version earlier than 16.8.
useHistoryuseLocationuseParamsuseRouteMatch
The usehistory hook provides access to the history instance, which can be used to navigate import use history from “react-router-dom”.
The useLocation hook returns a location object that represents the current URL. It’s similar to useState, which updates the location whenever the URL changes.
The useParams hook returns an object containing the key/value pairs of the URL parameter, which can be extremely helpful. You can access the match, params of the current Route by utilizing it.
Similar to Route, the useRouteMatch hook matches the current URL. Access to data not rendered at the Route is primarily practical.
Create a Back button with React Router
In the examples, we will show you the code in the component after the page has moved, which is the component with a Back button to go back to the previous page.
Use useHistory()
With this useHistory method, we can navigate the web page to the page we need. When we use the goBack() method, we can return to the page right before the page we are currently on.
Code:
const HomePage = () => {
let history = useHistory();
return (
<div>
<button onClick={() => { history.goBack(); }} >
Back
</button>
</div>
);
};
export default App;Use useNavigate()
In the “react-router-dom” v6 version, useHistory() has been removed, and you have to use an alternative method, useNavigate(), to navigate between the pages. Take a look at the example below to learn more about this.
Code:
const HomePage = () => {
const navigate = useNavigate();
const goBack = () => {
navigate(-1);
};
return (
<div>
<button onClick={goBack}}>
Back
</button>
</div>
);
};
export default App;When the button is clicked, we will run the callback function to be able to run the navigation. The code using navigate(-1) means returning to one unit and the previous page. I hope the above two methods can be applied to your program.
Summary
The article has shown you several ways to create a Back button with React Router. You can use useHistory() or useHistory() to do it. Good lucks for you!
Maybe you are interested:
- Argument type ‘HTMLElement or null’ not assignable to parameter type ‘Element or DocumentFragment’ – How to fix it?
- Go back to the previous page with React Router
- How to submit a form using the Enter key in React.js?
Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs