How to Go back to the previous Page with React Router

# 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.

Copied!
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>;
}

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

Copied!
const navigate = useNavigate();

Copied!
<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.

Copied!
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>
);

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').

Copied!
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>
  );
}

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.

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:

• Get the current URL and Route in React and React Router
• Redirect on form submit using React Router
• How to remove query params using React router
• Set a Default route with redirect using React Router
• Get the ID from a URL in React and React Router
• How to Go back to the previous Page with React Router
• Handling 404 page not found in React Router
• Programmatically update query params in React router
• No routes matched location in React Router [Solved]