94 votes

React-Router - Lien vs Redirection vs Historique

Il semble y avoir une confusion avec ce que d'utiliser les autres:

  • <Link to='/some/path'>
  • <Redirect to='/some/path'/>
  • history.push('/some/path')

J'ai été en utilisant Réagir/Routeur pour un peu de temps maintenant, et les différents postes/réponses-dire différentes choses à savoir quand les utiliser, et parfois, ils ne sont pas alignés avec ce que quelqu'un d'autre a dit. Donc, je pense que j'ai besoin de quelques éclaircissements sur ce point.

Ce que je comprends sur Link et cette documentation il:

Fournit déclarative, accessible autour de la navigation de votre application.

Ce que je comprends sur Redirect et cette documentation il:

Naviguer vers un nouvel emplacement. Le nouvel emplacement va se substituer à l'emplacement actuel dans l'histoire de la pile, comme le serveur de redirection HTTP (3xx) faire.

Il semble que tous les postes que j'ai lu presque tout le monde utilise Redirect pour naviguer autour de l'application, et personne n'a jamais recommande l'utilisation d' Link comme dans ce post.

Maintenant, history peut faire la même chose que Link et Redirect sauf que j'ai une histoire de la trace de la pile.

Question 1: Quand je veux utiliser Link vs Redirect, ce qui est le cas d'utilisation sur l'autre?

Question 2: Depuis history peut itinéraire d'un utilisateur à un autre emplacement dans l'application avec, en bonus, de l'histoire de la pile, dois-je toujours utiliser l'historique de l'objet lors de routage?

Question 3: Si je veux la route à l'extérieur de l'application, quelle est la meilleure méthode pour le faire? Balise d'ancrage, d'une Fenêtre.emplacement.href, Rediriger, Lien, aucune des réponses ci-dessus?

72voto

Mike Abeln Points 1127

Tout d'abord, je voudrais vraiment vous recommandons de lire ce site:
https://reacttraining.com/react-router/web/api/BrowserRouter

Réagir Routeur BrowserRouter maintient l'histoire de la pile pour vous, ce qui signifie que vous aurez rarement besoin de le modifier manuellement.

Mais pour répondre à vos questions:
Réponse 1: Vous aurez envie d'utiliser Link ou NavLink dans presque tous les cas d'utilisation. Redirect est très pratique dans certaines situations, même si, par exemple, lorsqu'une page 404 est rendu lorsque l'utilisateur tente d'accéder à un indéfini route. L' Redirect redirigera l'utilisateur à partir de la 404 route vers un nouvel itinéraire de votre choix, puis remplacer la dernière entrée dans l'histoire de la pile avec la redirection de route.

Cela signifie que l'utilisateur ne sera pas en mesure de frapper le retour de leur navigateur bouton, et le retour à la 404 route.

Link NavLink et Redirect tous utiliser le routeur de l'histoire de l'api sous le capot, à l'aide de ces composants à la place de l'histoire manuellement signifie que vous êtes à l'abri de toute modification de l'api de l'histoire dans le futur. L'utilisation de ces composants avenir-les preuves de votre code.

Réponse 2: BrowserRouter Maintient l'histoire de la pile pour vous, en général, mon opinion est que vous voulez rester à l'écart de mise à jour manuelle de l'endroit où vous pouvez.

Réponse 3: Voici quelques exemples pour les externes réagir liens:

<Route path='/external' component={() => window.location = 'https://external.com/path'}/>

<a href='https://external.com/path' target='_blank' rel='noopener noreferrer'>Regular Anchor tags work great</a>

target='_blank' va ouvrir le lien dans un nouvel onglet, mais s'il vous plaît assurez-vous d'inclure rel='noopener noreferrer' pour prévenir contre les vulnérabilités

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X