web-dev-qa-db-fra.com

React-Router Lien externe

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

Dites que quelqu'un frappe:

example.com/privacy-policy

Je voudrais qu'il redirige vers:

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

Je ne trouve absolument aucune aide pour éviter de l'écrire en clair JS à mon index.html en chargeant avec quelque chose comme:

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

J'ai en fait fini de construire ma propre composante. <Redirect>Il prend des informations de l'élément react-router pour que je puisse les conserver dans mes itinéraires. Tel que:

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

Voici mon composant incase-quelqu'un est 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, ce n’est pas si simple en 4.x

23
Relic

Voici un one-liner pour utiliser React Router pour rediriger vers un lien externe:

<Route path='/privacy-policy' component={() => { window.location = 'https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies'; return null;} }/>

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

Fonctionne à la fois sur les routeurs React 3 et 4.

64
Evgeny Lukianchikov

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

Si vous souhaitez accéder à 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>
13
Diego Laciar

En utilisant certaines des informations ici, je suis arrivé avec le composant suivant que vous pouvez utiliser dans vos déclarations de route. Il est compatible avec React Router v4.

Il utilise TypeScript, mais devrait être assez simple pour convertir en javascript natif:

interface Props {
  exact?: boolean;
  link: string;
  path: string;
  sensitive?: boolean;
  strict?: boolean;
}

const ExternalRedirect: React.FC<Props> = (props: Props) => {
  const { link, ...routeProps } = props;

  return (
    <Route
      {...routeProps}
      render={() => {
        window.location.replace(props.link);
        return null;
      }}
    />
  );
};

Et utiliser avec:

<ExternalRedirect
  exact={true}
  path={'/privacy-policy'}
  link={'https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies'}
/>
2
Jens Bodal

Je ne pense pas que React-Router fournisse ce support. La documentation mentions

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

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

0
ytibrewala

J'ai été capable de réaliser une redirection dans react-router-dom en utilisant les éléments suivants

<Route exact path="/" component={() => <Redirect to={{ pathname: '/YourRoute' }} />} />

Dans mon cas, je cherchais un moyen de rediriger les utilisateurs chaque fois qu'ils visitaient l'URL racine http://myapp.com vers un autre emplacement de l'application http://myapp.com/newplace. donc ce qui précède a aidé.

0
walecloud

POUR V3, bien que cela puisse fonctionner pour V4. Pour sortir de la réponse de Relic, je devais faire un peu plus, comme gérer le développement local où «http» n'est pas présent sur l'URL. Je redirige également vers une autre application sur le même serveur.

Ajouté au fichier de routeur:

import RedirectOnServer from './components/RedirectOnServer';

       <Route path="/somelocalpath"
          component={RedirectOnServer}
          target="/someexternaltargetstring like cnn.com"
        />

Et le composant:

import React, { Component } from "react";

export class RedirectOnServer extends Component {

  constructor(props) {
    super();
    //if the prefix is http or https, we add nothing
    let prefix = window.location.Host.startsWith("http") ? "" : "http://";
    //using Host here, as I'm redirecting to another location on the same Host
    this.target = prefix + window.location.Host + props.route.target;
  }
  componentDidMount() {
    window.location.replace(this.target);
  }
  render(){
    return (
      <div>
        <br />
        <span>Redirecting to {this.target}</span>
      </div>
    );
  }
}

export default RedirectOnServer;
0
MattC

Il n'est pas nécessaire de demander au routeur de réagir. Cette action peut être effectuée en mode natif et est fournie par le navigateur.

utilisez simplement window.location

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