204 votes

React-Router Lien externe

Comme j'utilise react-router pour gérer mes routes dans une application react, je suis curieux de savoir s'il existe un moyen de rediriger vers une ressource externe.

Disons que quelqu'un frappe :

example.com/privacy-policy

Je voudrais qu'il soit redirigé vers :

example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies

Je ne trouve aucune aide pour éviter de l'écrire en simple JS dans mon chargement index.html avec quelque chose comme :

if ( window.location.path === "privacy-policy" ){
  window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
}

0 votes

Quel routeur React utilisez-vous ?

0 votes

J'utilise la version 3.x

2 votes

Changez simplement window.location.href pour avoir une redirection formelle.

247voto

Voici un exemple d'utilisation de React Router pour rediriger vers un lien externe :

<Route path='/privacy-policy' component={() => { 
     window.location.href = 'https://example.com/1234'; 
     return null;
}}/>

Il utilise le concept de composant pur React pour réduire le code du composant à une seule fonction qui, au lieu de rendre quoi que ce soit, redirige le navigateur vers une URL externe.

Fonctionne à la fois sur React Router 3 et 4.

3 votes

Cela fonctionne mais je cherchais une solution plus élégante et évolutive. Voyez ce que j'ai trouvé car cela m'a permis d'aller encore plus loin avec les redirections pour les MobileApps etc ( pas ReactNative, vraiment des applications natives ). Maintenant, ce que je fais n'est pas la bonne façon de résoudre mon problème, mais pour résoudre ce problème, je vous suggère d'étudier ma solution également, si ce n'est que pour une perspective différente.

1 votes

Ce n'est pas vraiment très propre dans mon esprit. Honnêtement, je préférerais utiliser une balise d'ancrage. Deuxièmement, le fait d'appuyer sur le bouton "retour" du navigateur vous renvoie l'itinéraire qui redirige ensuite vers exemple.zendesk.com/hc/en-us/articles/

25 votes

Pour un meilleur comportement du bouton retour (à vérifier pour votre application), utilisez window.location.replace(' exemple.com )

91voto

Diego Laciar Points 414

Il n'est pas nécessaire d'utiliser <Link /> composant de react-router.

Si vous voulez aller vers un lien externe, utilisez une balise d'ancrage.

<a target="_blank" href="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies">Policies</a>

39 votes

Le PO demandait comment le faire de manière programmatique, et non déclarative.

33 votes

Réponse sans rapport et trompeuse.

13 votes

Si vous l'utilisez, ajoutez rel="noopener noreferrer" à la <a>

56voto

Alan Points 417

Il n'est pas nécessaire de demander un routeur de réaction. Cette action peut être faite nativement et elle est fournie par le navigateur.

utilisez simplement window.location

class RedirectPage extends React.Component {
  componentDidMount(){
    window.location.replace('https://www.google.com')
  }
}

également, si vous voulez l'ouvrir dans un nouvel onglet :

window.open('https://www.google.com', '_blank');

1 votes

Cette réponse est incomplète, elle ne tient pas compte de l'abstraction ou de sa relation avec le routeur.

18 votes

C'est l'objectif. Il n'est pas nécessaire de demander un routeur de réaction. Cette action peut être faite nativement et elle est fournie par le navigateur.

0 votes

Que faire si nous voulons passer l'URL de façon dynamique avec le code d'état HTTP lors de la redirection vers un site externe. J'ai reçu quelques exemples, mais ils ne correspondent pas à mes besoins. gist.github.com/arasmussen/f2c01dc858481590f6bffae6b540632c

51voto

Relic Points 1236

En fait, j'ai fini par construire mon propre composant. <Redirect> Il prend des informations du react-router élément pour que je puisse le garder dans mes itinéraires. Par exemple :

<Route
  path="/privacy-policy"
  component={ Redirect }
  loc="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies"
  />

Voici mon composant au cas où quelqu'un serait curieux :

import React, { Component } from "react";

export class Redirect extends Component {
  constructor( props ){
    super();
    this.state = { ...props };
  }
  componentWillMount(){
    window.location = this.state.route.loc;
  }
  render(){
    return (<section>Redirecting...</section>);
  }
}

export default Redirect;

EDIT -- NOTE : Ceci est avec react-router: 3.0.5 mais ce n'est pas si simple en 4.x.

0 votes

Vous n'êtes pas obligé de faire quoi que ce soit, react est un cadre, et il y a beaucoup de valeur dans un cadre. Voici comment le faire dans le cadre de react. Cependant, il ne prend PAS en compte le module d'historique du navigateur qui pourrait être intégré ici, ce qui le rend encore plus utile. Veuillez également noter que "window.location" est la façon dont cela était fait en 1999. C'est juste un moyen de l'ajouter à votre table de routes pour le routage côté client. Ce n'est pas une "bonne" solution.

0 votes

Dans react -router v4 vous pouvez utiliser render au lieu de composant

4 votes

@Irrech "render instead component" ne signifie rien. Si vous avez une réponse à la question, veuillez l'ajouter et donner des détails sur la façon dont vous l'implémenteriez.

1voto

ytibrewala Points 126

Je ne pense pas que React-Router fournisse ce support. Le site documentation mentionne

Une < Redirection > met en place une redirection vers une autre route dans la section votre demande pour maintenir les anciennes URL.

Vous pouvez essayer d'utiliser quelque chose comme React-Redirect au lieu de

0 votes

React-Redirect est déprécié

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