wake-up-neo.net

React-Router Externer Link

Da ich mit reaktem Router meine Routen in einer reagierten App abwickle, bin ich neugierig, ob es eine Möglichkeit gibt, an eine externe Ressource umzuleiten.

Sagen Sie jemand schlägt:

example.com/privacy-policy

Ich möchte es weiterleiten an:

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

Ich finde genau null Hilfe, um zu vermeiden, dass ich es in plain JS schreibe, wenn meine index.html geladen wird.

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

Ich habe am Ende meine eigene Komponente gebaut. <Redirect>Er nimmt Informationen aus dem react-router-Element, damit ich sie in meinen Routen behalten kann. Sowie:

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

Hier ist meine Komponente incase-jedermann ist neugierig:

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;

BEARBEITEN - HINWEIS: Dies ist mit react-router: 3.0.5 in 4.x nicht so einfach

23
Relic

Hier ist ein Einzeiler für die Verwendung von React Router zur Weiterleitung an einen externen Link:

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

Es verwendet das React-Komponentenkonzept, um den Code der Komponente auf eine einzige Funktion zu reduzieren, die den Browser nicht darstellt, sondern zu einer externen URL umleitet.

Funktioniert auf React Router 3 und 4.

64
Evgeny Lukianchikov

Es ist nicht notwendig, die <Link />-Komponente vom Reakt-Router zu verwenden.

Wenn Sie einen externen Link aufrufen möchten, verwenden Sie ein Ankertag.

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

Anhand einiger Informationen hier habe ich die folgende Komponente entwickelt, die Sie in Ihren Routenerklärungen verwenden können. Es ist kompatibel mit React Router v4.

Es verwendet TypeScript, sollte aber für die Konvertierung in natives Javascript recht einfach sein:

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;
      }}
    />
  );
};

Und verwenden Sie mit:

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

Ich glaube nicht, dass React-Router diese Unterstützung bietet. Die Dokumentation Erwähnungen

Eine <Umleitung> richtet eine Umleitung zu einer anderen Route in Ihrer Anwendung ein, um alte URLs zu verwalten.

Sie könnten stattdessen etwas wie React-Redirect verwenden

0
ytibrewala

Ich konnte eine Umleitung im React-Router-Dom mit folgendem erreichen

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

In meinem Fall habe ich nach einer Möglichkeit gesucht, Benutzer umzuleiten, wenn sie die Stamm-URL http://myapp.com an einen anderen Ort innerhalb der App http://myapp.com/newplace aufrufen. so half das oben.

0
walecloud

FOR V3, obwohl es für V4 funktionieren kann. Als Relic's Antwort wegging, musste ich noch ein bisschen mehr tun, wie die lokale Entwicklung, bei der "http" nicht auf der URL vorhanden ist. Ich leite auch zu einer anderen Anwendung auf demselben Server um.

Zu Router-Datei hinzugefügt:

import RedirectOnServer from './components/RedirectOnServer';

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

Und die Komponente:

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

Es muss kein reaktiver Router angefordert werden. Diese Aktion kann nativ ausgeführt werden und wird vom Browser bereitgestellt.

benutze einfach window.location

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