React-Router v4 - Lien vs redirection vs historique
Il semble y avoir une certaine confusion avec ce qu’il faut utiliser par rapport à l’autre:
<Link to='/some/path'><Redirect to='/some/path'/>history.Push('/some/path')
J'utilise React/Router depuis quelque temps déjà, et différents messages/réponses disent des choses différentes quant au moment de les utiliser, et parfois, ils ne correspondent pas à ce que quelqu'un d'autre a dit. Je pense donc avoir besoin d'éclaircissements à ce sujet.
D'après ce que j'ai compris à propos de Link et de ce documentation le:
Fournit une navigation déclarative et accessible autour de votre application.
D'après ce que j'ai compris à propos de Redirect et de ce documentation le:
Va naviguer vers un nouvel emplacement. Le nouvel emplacement remplacera l'emplacement actuel dans la pile d'historique, comme le font les redirections côté serveur (HTTP 3xx).
Il semble que toutes les publications que j'ai lues utilisent presque Redirect pour naviguer dans leur application, et personne ne recommande jamais d'utiliser Link comme dans ce post .
Maintenant, history peut faire la même chose que Link et Redirect sauf que j'ai une trace de pile d'historique.
Question 1: Quand voudrais-je utiliser Link contre Redirect, quel est le cas d'utilisation par rapport à l'autre?
Question 2: Étant donné que history peut router un utilisateur vers un autre emplacement dans l'application avec le bonus supplémentaire de la pile d'historique, devrais-je toujours juste utiliser l'objet historique lors du routage?
Question 3: Si je veux router en dehors de l'application, quelle est la meilleure méthode pour le faire? Balise d'ancrage, Window.location.href, Redirection, Lien, aucune de ces réponses?
Tout d’abord, je recommanderais vraiment de lire ce site:
https://reacttraining.com/react-router/web/api/BrowserRouter
React Router's BrowserRouter conserve la pile d'historique pour vous, ce qui signifie que vous avez rarement besoin de la modifier manuellement.
Mais pour répondre à vos questions:
Réponse 1: Vous voudrez utiliser Link ou NavLink dans presque tous les cas d'utilisation . Redirect est pratique dans certaines situations, par exemple lorsqu'une page 404 est rendue lorsque l'utilisateur tente d'accéder à une route non définie. La Redirect redirige l'utilisateur de la route 404 vers une nouvelle route de votre choix, puis remplace la dernière entrée de la pile d'historique par la route redirigée.
Cela signifie que l'utilisateur ne pourra pas appuyer sur le bouton Précédent de son navigateur et revenir à la route 404.
LinkNavLink et Redirect utilisent tous l'api d'historique du routeur sous le capot. L'utilisation manuelle de ces composants à la place de l'historique signifie que vous êtes sûr de ne pas subir de modifications à l'api d'historique dans futur. L'utilisation de ces composants permet de mettre à jour votre code.
Réponse 2: BrowserRouter Conserve la pile d’historique pour vous. En général, j’estime que vous souhaitez éviter de le mettre à jour manuellement, où pouvez.
Réponse 3: Voici quelques exemples de liens de réaction externes:
<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' ouvrira le lien dans un nouvel onglet, mais assurez-vous d’inclure rel='noopener noreferrer' pour prévenir contre vulnérabilités