Pruebe este enfoque

 import { useNavigate } from 'react-router-dom'; function YourApp() { const navigate = useNavigate(); return ( <> <button onClick={() => navigate(-1)}>go back</button> </> ); }

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

En versiones antiguas de react-router-dom existen funciones pop

puedes llegar a ellos como:

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

ahora en v6 puedes usar la función useNavegar

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

Hay otra forma de usar un delta (número) en react-router Links v6:

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

Desafortunadamente, hay un error de tipo en el mecanografiado, el componente de enlace no acepta números, pero aún funciona.

En caso de que alguien llegue aquí como lo hice yo tratando de navegar hacia atrás O navegar a otro lugar si no puede navegar hacia atrás (por ejemplo, enlace abierto en una pestaña nueva), no parece haber ninguna forma de verificar el historial con react-router en v6. Sin embargo , parece que puede acceder a window.history.state que tiene una propiedad idx que es cero si está al comienzo de la pila de historial.

Es posible que haya algunas trampas a su alrededor con las que no me he topado, pero está funcionando para mí:

 import { useNavigate } from 'react-router-dom'; // ... const navigate = useNavigate(); // ... if (window.history.state && window.history.state.idx > 0) { navigate(-1); } else { navigate('/', { replace: true } }