81
votes

Comment revenir à l'itinéraire précédent dans React-Router-Dom V6

Sur les premières versions, nous pouvons revenir à route précédente en utilisant History .

history.goBack()

Comment je peux y parvenir avec v6 de react-router-dom ?

reactjs react-router react-router-dom

2 commentaires

github.com/reacttraining/react-router/blob/dev/docs/… On dirait que cela pourrait être sur usenavigate

C'est génial et tout. Comment utilisez-vous les boutons arrière et avant du navigateur? Ils ne détectent pas l'itinéraire précédent dans la pile pour une raison quelconque.

5 Réponses :

172
votes

Essayez cette approche xxx

2 commentaires

Bonjour, j'ai une question: s'il n'y a pas de page de précédente, comment puis-je le laisser aller à la page d'accueil s'il vous plaît?

@Peterlitszo utilisez navigation ("/")

42
votes

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

0 commentaires

12
votes

Dans les anciennes versions de React-Router-Dom, il existe des fonctions pop

Vous pouvez les atteindre comme:

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

Maintenant, dans V6, vous pouvez utiliser la fonction usenavigate / p>

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

2 commentaires

20 minutes de creusement de la documentation et de cette approche magique n'étaient introuvables. Merci

@Danielbaranowski plaisir que je peux vous aider! :RÉ

5
votes

Il existe un autre moyen en utilisant un delta (numéro) dans React-Router Links v6:

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

Malheureusement, il y a une erreur de type dans TypeScript, le composant de liaison n'accepte pas les nombres, mais toujours il fonctionne.

2 commentaires

Fonctionne également avec NavLink: Back

Pour toute personne intéressée à l'utiliser avec TypeScript: au lieu de simplement -1 , vous pouvez écrire -1 comme n'importe quel .

11
votes

Au cas où quelqu'un arrivera comme je l'ai fait pour essayer de revenir en arrière ou de naviguer ailleurs si vous ne pouvez pas revenir en arrière (par exemple, le lien ouvert dans un nouvel onglet), il ne semble pas y avoir de façon de vérifier l'histoire avec React-Router dans V6. Cependant il semble que vous puissiez accéder à Window.History.state qui a une propriété IDX qui est nul si vous êtes au début de la pile d'historique. Je n'ai pas affronté, mais ça marche pour moi:

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

0 commentaires