Lien externe React-Router

Puisque j'utilise react-router pour gérer mes itinéraires dans une application react, je suis curieux de savoir s'il existe un moyen de rediriger 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 aucune aide pour éviter de l'écrire en JS brut à 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"
}

Voici une ligne unique pour utiliser 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.

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

Si vous souhaitez accéder 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>

J'ai fini par construire mon propre composant. <Redirect> Il prend des informations sur l' react-routerélément 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 au cas où 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;

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

Il n'a pas besoin de demander le routeur de réaction. Cette action peut être effectuée de manière native et est fournie par le navigateur.

juste utiliser window.location

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

Avec le composant Link de react-router, vous pouvez le faire. Dans le prop " to ", vous pouvez spécifier 3 types de données:

• une chaîne : une représentation sous forme de chaîne de l'emplacement du lien, créée en concaténant le chemin d'accès, la recherche et les propriétés de hachage de l'emplacement.
• un objet : un objet qui peut avoir l'une des propriétés suivantes:
  • chemin d'accès : une chaîne représentant le chemin vers lequel établir un lien.
  • recherche : représentation sous forme de chaîne des paramètres de requête.
  • hash : un hachage à mettre dans l'URL, par exemple # a-hash.
  • état : état à conserver à l'emplacement.
• une fonction : une fonction à laquelle l'emplacement actuel est passé comme argument et qui doit renvoyer une représentation de l'emplacement sous forme de chaîne ou d'objet

Pour votre exemple (lien externe):

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

Vous pouvez faire ce qui suit:

<Link to={{ pathname: "https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" }} target="_blank" />

Vous pouvez également transmettre les accessoires que vous souhaitez utiliser, tels qu'un titre, un identifiant, un nom de classe, etc.

En utilisant certaines des informations ici, j'ai trouvé le composant suivant que vous pouvez utiliser dans vos déclarations d'itinéraire. Il est compatible avec React Router v4.

Il utilise du typographie, 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'}
/>

J'ai eu de la chance avec ceci:

  <Route
    path="/example"
    component={() => {
    global.window && (global.window.location.href = 'https://example.com');
    return null;
    }}
/>

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

Une <Redirection> 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

Pour développer la réponse d'Alan, vous pouvez créer un <Route/>qui redirige tous <Link/>les attributs «vers» contenant «http:» ou «https:» vers la bonne ressource externe.

Vous trouverez ci-dessous un exemple de travail qui peut être placé directement dans votre <Router>.

<Route path={['/http:', '/https:']} component={props => {
  window.location.replace(props.location.pathname.substr(1)) // substr(1) removes the preceding '/'
  return null
}}/>

POUR V3, bien que cela puisse fonctionner pour V4. En partant de la réponse d'Eric, 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. Je l'ai donc fait de cette façon en utilisant la méthode de rendu Route (et en utilisant le routeur React v4):

redirectToHomePage = (): null => {
    window.location.reload();
    return null;
  };    
<Route exact path={'/'} render={this.redirectToHomePage} />

Où vous pouvez utiliser à la place window.location.assign(), window.location.replace()etc.

Si vous utilisez le rendu côté serveur, vous pouvez utiliser StaticRouter. Avec votre composant au contextfur propset à mesure , puis en ajoutant <Redirect path="/somewhere" />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 transmis au routeur statique pour vous faire savoir que votre chemin correspond à un composant de redirection. maintenant que vous savez que vous avez frappé une redirection, il vous suffit de vérifier si c'est la redirection que vous recherchez. puis redirigez simplement via le serveur. ctx.redirect('https://example/com').

J'ai pu réaliser une redirection dans react-router-dom en utilisant ce qui suit

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

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