React-Router Lien externe

Question

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 accède à :

example.com/privacy-policy

Je voudrais le rediriger vers :

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

Je ne trouve absolument aucune aide pour éviter de l'écrire en JavaScript brut lors du chargement de mon index.html avec quelque chose comme :

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

Answer 1

Voici une seule ligne pour utiliser React Router pour rediriger vers un lien externe:

 {
    window.location.href = 'https://example.com/1234';
    return null;
}}/>

Il utilise le concept de composant pur de 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.

Cela fonctionne à la fois sur React Router 3 et 4.

Answer 2

Il n'est pas nécessaire d'utiliser le composant de React Router.

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

Politiques

Utilisez les attributs de lien rel="noopener" ou rel="noreferrer" pour chaque lien. L'attribut de lien rel="noreferrer" fonctionne également de la même manière que l'attribut de lien "noopener" en ce qu'il empêche le site lié de prendre le contrôle du site de liaison.

Answer 3

Il n'est pas nécessaire de demander React Router. Cette action peut être réalisée de manière native et est fournie par le navigateur.

Il suffit d'utiliser window.location.

Avec React Hooks

const RedirectPage = () => {
  React.useEffect(() => {
    window.location.replace('https://www.google.com')
  }, [])
}

Avec React Class Component

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

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

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

Answer 4

En fait, j'ai fini par construire mon propre composant, . Il récupère des informations de l'élément react-router, donc je peux le garder dans mes itinéraires. Comme ceci:

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 (Redirection en cours...);
  }
}

export default Redirect;

Remarque: Ceci est avec react-router: 3.0.5, ce n'est pas aussi simple en 4.x

Answer 5

Je ne pense pas que React Router offre ce support. La documentation mentionne

Un < Redirect > configure une redirection vers une autre route dans votre application pour conserver les anciennes URL.

Vous pourriez essayer d'utiliser quelque chose comme React-Redirect à la place.