How to go back to previous route in react-router-dom v6

Question

On early versions we can go back to previous route using history.

history.goBack()

How I can achieve that with v6 of react-router-dom?

Answer 1

Try this approach

import { useNavigate } from 'react-router-dom';

function YourApp() {
  const navigate = useNavigate();

  return (
    <>
      <button onClick={() => navigate(-1)}>go back</button>
    </>
  );
}

Answer 2

in V6,

import { useNavigate } from 'react-router-dom';
 
function App() {
  const navigate = useNavigate();
 
  return (
    <>
      <button onClick={() => navigate(-2)}>Go 2 pages back</button>
      <button onClick={() => navigate(-1)}>Go back</button>
      <button onClick={() => navigate(1)}>Go forward</button>
      <button onClick={() => navigate(2)}>Go 2 pages forward</button>
    </>
  );
}

Answer 3

Just in case anyone gets here like I did trying to navigate back OR navigate somewhere else if you can't navigate back (e.g. link opened in new tab), there doesn't seem to be any way of verifying the history with react-router in v6. However it seems you can access window.history.state which has an idx property that is zero if you're at the start of the history stack.

It's possible there are some gotchas around it that I haven't hit up against, but it's working for me:

import { useNavigate } from 'react-router-dom';

// ...

const navigate = useNavigate();

// ...

if (window.history.state && window.history.state.idx > 0) {
    navigate(-1);
} else {
    navigate('/', { replace: true }); // the current entry in the history stack will be replaced with the new one with { replace: true }
}

Answer 4

In old versions of react-router-dom there exists functions pop

you can reach them like:

const history = useHistory();
history.pop()

now in v6 you can use function useNavigate

const navigate = useNavigate();
navigate(-1) // you will go one page back
navigate(-2) // you will go two pages back

Answer 5

There is another way using a delta (number) in react-router Links v6 :

const BackButton = () => {
  return (
    <Link to={-1}>
      Back
    </Link>
  );
};

Unfortunately there is a type error in typescript, Link component does not accept numbers, but still it works.

Answer 6

If you want to navigate back or else where you can try this:

 <button onClick={() => navigate(-1) || navigate('/dashboard')}>
    Go back or Dashboard
  </button>

Answer 7

I would like to add that sometimes, there is a condition wherein navigate(-1) will lead to the wrong page such as for redirects during authorization check.

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate(-1);

If we want to explicitly define a state where we have a previous page, we can add a "from" property in the state.

import { useLocation, useNavigate } from 'react-router-dom';
const location = useLocation();
const navigate = useNavigate();
const currentPath = location.pathname;
navigate('/login', { state: { from: currentPath } });

Here before navigating to the login page, we set the routing state to have a "from" property which is equated to the current route.

When loading the page after logging in, we check first if there is a previous route stored in the state's "from" property much like the history stack with one level.

  const state = location.state;
  if (state?.from) {
     // Redirects back to the previous unauthenticated routes
     navigate(state?.from);
  else {
     navigate('/main-page');
   }

If the "from" property is falsy, then we navigate to a default page.

Again, this is a solution where we explicity define a previous route rather than than relying on the recent item in the history.

Answer 8

import { useEffect } from "react";
import {useNavigate } from "react-router-dom";// react-router-dom v6 version 

const SecondComponent = () =>{
const navigate = useNavigate();
  
useEffect(() => {
    navigate('/secondComponent')
  },[]);

// note: we must have to to provide path like this one 
/*
<Routes>
        <Route path="/" element={<FirstComponent/>} />
        <Route path="/secondComponent" element={<SecondComponent />} />
      </Routes>
*/

  return(
    <>
    <h2 >this is Second page</h2>
    </>
  )
}

export  default SecondComponent;