Réagir-Routeur 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.
Dire 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 trouve exactement zéro aide pour éviter de l'écrire en js simple à mon index.chargement html avec quelque chose comme:
if ( window.location.path === "privacy-policy" ){
window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
}
7 réponses
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'}/>
Il utilise React pure component concept 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.
En fait, j'ai fini par construire mon propre composant. <Redirect>
Il prend des informations de l'élément react-router afin que je puisse le garder dans mes routes. Tels que:
<Route
path="/privacy-policy"
component={ Redirect }
loc="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies"
/>
Voici mon composant incase-tout le monde 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;
MODIFIER -- NOTE:
C'est avec react-router: 3.0.5, il n'est pas si simple en 4.x
Il n'est pas nécessaire d'utiliser <Link /> composant de réagir-routeur.
Si vous voulez aller au lien externe, utilisez une balise d'ancrage.
<a target="_blank" href="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies">Policies</a>
Je ne pense pas que React-Router fournisse ce support. La documentation mentionne
Un configure une redirection vers une autre route dans votre application pour maintenir les anciennes URL.
Vous pouvez essayer d'utiliser quelque chose comme Réagir de Redirection plutôt que
Pour V3, bien que cela puisse fonctionner pour V4. En sortant de la réponse de Relic, j'avais besoin de 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 du 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;
En utilisant React avec Typescript, vous obtenez une erreur car la fonction doit renvoyer un élément react, pas void. Donc, je l'ai fait de cette façon en utilisant la méthode de rendu de Route (et en utilisant React router V4):
redirectToHomePage = (): null => {
window.location.reload();
return null;
};
<Route exact path={'/'} render={this.redirectToHomePage} />
, Où vous pouvez également utiliser window.location.assign(), window.location.replace() etc
Si vous utilisez le rendu côté serveur, vous pouvez utiliser StaticRouter. Avec votre context comme props, puis en ajoutant <Redirect path="/somewhere" /> composant dans votre application. L'idée est que chaque fois que react-router correspond à un composant de redirection, il ajoutera quelque chose dans le contexte que vous avez passé dans le routeur statique pour vous faire savoir que votre chemin correspond à un composant de redirection. maintenant que vous savez que vous frappez une redirection, il vous suffit de vérifier si c'est la redirection que vous recherchez. ensuite, il suffit de rediriger via le serveur. ctx.redirect('https://example/com').