React-Router Externer Link

Da ich React-Router verwende, um meine Routen in einer React-App zu verarbeiten, bin ich gespannt, ob es eine Möglichkeit gibt, zu einer externen Ressource umzuleiten.

Angenommen, jemand trifft:

example.com/privacy-policy

Ich möchte, dass es umgeleitet wird zu:

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

Ich finde genau null Hilfe, um zu vermeiden, dass es in einfachem JS in meiner index.html geschrieben wird, die mit etwas geladen wird wie:

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

Hier ist ein Einzeiler für die Verwendung von React Router zum Umleiten zu einem externen Link:

<Route path='/privacy-policy' component={() => { 
     window.location.href = 'https://example.com/1234'; 
     return null;
}}/>

Es verwendet das React pure Component-Konzept, um den Code der Komponente auf eine einzige Funktion zu reduzieren, die den Browser nicht rendert, sondern an eine externe URL weiterleitet.

Funktioniert sowohl auf React Router 3 als auch auf React Router 4.

Es ist nicht erforderlich, eine <Link />Komponente vom React-Router zu verwenden.

Wenn Sie zu einem externen Link wechseln möchten, verwenden Sie ein Ankertag.

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

Am Ende habe ich meine eigene Komponente gebaut. <Redirect> Es werden Informationen aus dem react-routerElement entnommen, 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, falls jemand neugierig ist:

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, es ist in 4.x nicht so einfach

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

benutz einfach window.location

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

Mit der Link-Komponente des React-Routers können Sie das tun. In der " to " Requisite können Sie 3 Arten von Daten angeben:

• ein Faden : Eine Zeichenfolgendarstellung des Link-Speicherorts, die durch Verketten der Eigenschaften Pfadname, Suche und Hash des Standorts erstellt wird.
• ein Objekt : Ein Objekt, das eine der folgenden Eigenschaften haben kann:
  • Pfadname : Eine Zeichenfolge, die den Pfad darstellt, zu dem eine Verknüpfung hergestellt werden soll.
  • Suche : Eine Zeichenfolgendarstellung von Abfrageparametern.
  • Hash : Ein Hash, der in die URL eingefügt werden soll, z. B. # a-Hash.
  • state : Zustand, in dem der Standort beibehalten werden soll.
• a function : Eine Funktion, an die der aktuelle Standort als Argument übergeben wird und die die Standortdarstellung als Zeichenfolge oder als Objekt zurückgeben soll

Für Ihr Beispiel (externer Link):

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

Sie können Folgendes tun:

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

Sie können auch Requisiten übergeben, auf denen Sie sich befinden möchten, z. B. Titel, ID, Klassenname usw.

Unter Verwendung 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 Typoskript, sollte aber ziemlich einfach sein, um es in natives Javascript zu konvertieren:

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 mit:

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

Ich hatte Glück damit:

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

Ich glaube nicht, dass React-Router diese Unterstützung bietet. In der Dokumentation wird erwähnt

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

Sie könnten stattdessen versuchen, etwas wie React-Redirect zu verwenden

Um Alans Antwort zu erweitern, können Sie ein Attribut erstellen <Route/>, das alle <Link/>mit "to" -Attributen, die "http:" oder "https:" enthalten, an die richtige externe Ressource umleitet .

Unten finden Sie ein Arbeitsbeispiel dafür, das direkt in Ihrem platziert werden kann <Router>.

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

FÜR V3, obwohl es für V4 funktionieren kann. Ausgehend von Erics Antwort musste ich etwas mehr tun, z. B. die lokale Entwicklung, bei der 'http' in der URL nicht vorhanden ist. Ich leite auch zu einer anderen Anwendung auf demselben Server um.

Zur 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;

Wenn Sie mit Typoskript reagieren, wird eine Fehlermeldung angezeigt, da die Funktion ein Reaktionselement zurückgeben muss, nicht void. Also habe ich es auf diese Weise mit der Route-Render-Methode (und mit React Router v4) gemacht:

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

Wo Sie stattdessen auch verwenden könnten window.location.assign(), window.location.replace()etc.

Wenn Sie serverseitiges Rending verwenden, können Sie verwenden StaticRouter. Mit Ihrem contextas propsund dann Hinzufügen einer <Redirect path="/somewhere" />Komponente in Ihrer App. Die Idee ist, dass jedes Mal, wenn der React-Router mit einer Umleitungskomponente übereinstimmt, dem Kontext, den Sie an den statischen Router übergeben haben, etwas hinzugefügt wird, um Sie darüber zu informieren, dass Ihr Pfad mit einer Umleitungskomponente übereinstimmt. Jetzt, da Sie wissen, dass Sie eine Weiterleitung getroffen haben, müssen Sie nur noch überprüfen, ob dies die Umleitung ist, nach der Sie suchen. dann einfach durch den Server umleiten. ctx.redirect('https://example/com').

Ich konnte eine Umleitung in React-Router-Dom wie folgt erreichen

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

In meinem Fall suchte ich nach einer Möglichkeit, Benutzer bei jedem Besuch der Stamm-URL http://myapp.coman eine andere Stelle in der App umzuleiten http://myapp.com/newplace. also hat das oben genannte geholfen.