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

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?

Try this approach

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

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

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

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>
    </>
  );
}

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

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 }
}

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.