How to Go back to the previous Page with React Router

Borislav Hadzhiev

Last updated: Jan 18, 2023
3 min


# Go back to the previous page with React Router

To go back to the previous page with React router:

  1. Use the useNavigate() hook, e.g. const navigate = useNavigate();.
  2. Call the navigate() function passing it -1 - navigate(-1).
  3. Calling navigate with -1 is the same as hitting the back button.
import { Link, Routes, Route, useNavigate, } from 'react-router-dom'; export default function App() { const navigate = useNavigate(); return ( <div> <button onClick={() => navigate(-1)}>Go back</button> <button onClick={() => navigate(1)}>Go forward</button> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> </ul> </nav> {/* ๐Ÿ‘‡๏ธ Wrap your Route components in a Routes component */} <Routes> <Route path="/about" element={<About />} /> <Route path="/" element={<Home />} /> </Routes> </div> </div> ); } function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; }

react router go back to previous page

The useNavigate hook returns a function that lets us navigate programmatically, e.g. after a form is submitted or a button is clicked.

const navigate = useNavigate();
To go back to the previous page, pass -1 as a parameter to the navigate() function, e.g. navigate(-1).
<button onClick={() => navigate(-1)}>Go back</button>

Calling navigate with -1 is the same as hitting the back button.

Similarly, you can call the navigate function with -2 to go 2 pages back.

You can pass 1 to the navigate function to navigate one page forward.

If you need to handle 404 page not found in React Router, click on the following article.

# Wrap your React application in a Router component

To use the useNavigate hook in your application, make sure the App component in your index.js file is wrapped in a Router.

import {createRoot} from 'react-dom/client'; import App from './App'; import {BrowserRouter as Router} from 'react-router-dom'; const rootElement = document.getElementById('root'); const root = createRoot(rootElement); // ๐Ÿ‘‡๏ธ wrap App in Router root.render( <Router> <App /> </Router> );

wrap your react application in router component

The best place to wrap your React app with a Router component is in your index.js file because that's the entry point of your React application.

Once your entire app is wrapped with a Router component, you can use any of the hooks from the React Router package anywhere in your components.

# Navigate to a different route programmatically

To programmatically navigate to a different route, pass the path to the navigate function, e.g. navigate('/about').

import {useNavigate} from 'react-router-dom'; export default function App() { const navigate = useNavigate(); const handleClick = () => { // ๐Ÿ‘‡๏ธ replace set to true navigate('/about', {replace: true}); }; return ( <div> <button onClick={handleClick}>Navigate to About</button> </div> ); }

navigate to different route programmatically

When the replace property on the options object is set to true, the current entry in the history stack gets replaced with the new one.

In other words, navigating to the new route won't push a new entry into the history stack, so if the user clicks the back button, they won't be able to navigate to the previous page.

This is useful when a user logs in because you don't want them to be able to click the back button and get back to the login page.

It is also useful if you have a route that redirects users to a different page because you don't want users to click the back button and get redirected again.

If you need to navigate one page forward, call navigate with 1 - navigate(1).

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2023 Borislav Hadzhiev