Collegamento esterno React-Router

Dato che utilizzo il router per gestire i miei percorsi in un'app, sono curioso di sapere se esiste un modo per reindirizzare a una risorsa esterna.

Di 'che qualcuno colpisce:

example.com/privacy-policy

Vorrei che reindirizzasse a:

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

Sto trovando esattamente zero aiuto nell'evitare di scriverlo in semplice JS al mio caricamento index.html con qualcosa del tipo:

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

Ecco una riga per utilizzare React Router per reindirizzare a un collegamento esterno:

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

Utilizza il concetto di componente puro di React per ridurre il codice del componente a una singola funzione che, invece di rendere qualsiasi cosa, reindirizza il browser a un URL esterno.

Funziona sia su React Router 3 che su 4.

Non è necessario utilizzare <Link />componenti da React-Router.

Se vuoi andare su un link esterno usa un anchor tag.

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

In realtà ho finito per costruire il mio componente. <Redirect> Prende informazioni react-routerdall'elemento in modo da poterlo conservare nei miei percorsi. Ad esempio:

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

Ecco il mio componente se qualcuno è curioso:

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 - NOTA: Questo è con react-router: 3.0.5, non è così semplice in 4.x

Non è necessario richiedere il router di reazione. Questa azione può essere eseguita in modo nativo ed è fornita dal browser.

basta usare window.location

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

Con il componente Link di React-router puoi farlo. Nella prop " a " puoi specificare 3 tipi di dati:

• una stringa : una rappresentazione di stringa della posizione del collegamento, creata concatenando il nome del percorso, la ricerca e le proprietà hash della posizione.
• un oggetto : un oggetto che può avere una delle seguenti proprietà:
  • pathname : una stringa che rappresenta il percorso a cui collegarsi.
  • ricerca : una rappresentazione di stringa dei parametri di query.
  • hash : un hash da inserire nell'URL, ad esempio # a-hash.
  • state : stato per persistere nella posizione.
• una funzione : una funzione alla quale viene passata la posizione corrente come argomento e che dovrebbe restituire la rappresentazione della posizione come stringa o come oggetto

Per il tuo esempio (link esterno):

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

Puoi fare quanto segue:

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

Puoi anche passare oggetti di scena su cui vorresti essere come titolo, id, className, ecc.

Usando alcune delle informazioni qui, ho trovato il seguente componente che puoi usare nelle tue dichiarazioni di rotta. È compatibile con React Router v4.

Utilizza il dattiloscritto, ma dovrebbe essere abbastanza semplice da convertire in javascript nativo:

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

E usa con:

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

Ho avuto fortuna con questo:

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

Non credo che React-Router fornisca questo supporto. La documentazione menziona

Un <Redirect> imposta un reindirizzamento a un altro percorso nell'applicazione per mantenere i vecchi URL.

Potresti provare a usare qualcosa come React-Redirect invece

Per espandere la risposta di Alan, puoi creare un <Route/>che reindirizza tutto<Link/> attributi "a" contenenti "http:" o "https:" alla risorsa esterna corretta.

Di seguito è riportato un esempio funzionante di questo che può essere posizionato direttamente nel tuo file <Router>.

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

PER V3, sebbene possa funzionare per V4. Partendo dalla risposta di Eric, avevo bisogno di fare un po 'di più, come gestire lo sviluppo locale dove "http" non è presente nell'URL. Sto anche reindirizzando a un'altra applicazione sullo stesso server.

Aggiunto al file del router:

import RedirectOnServer from './components/RedirectOnServer';

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

E il componente:

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;

Usando React with Typescript ottieni un errore in quanto la funzione deve restituire un elemento react, non void. Quindi l'ho fatto in questo modo usando il metodo di rendering del percorso (e usando il router React v4):

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

Dove potresti invece usare anche window.location.assign(), window.location.replace()ecc

Se stai usando il rending lato server, puoi usare StaticRouter. Con il tuo contextas propse poi aggiungi il <Redirect path="/somewhere" />componente nella tua app. L'idea è che ogni volta che react-router corrisponde a un componente di reindirizzamento, aggiungerà qualcosa nel contesto passato al router statico per farti sapere che il tuo percorso corrisponde a un componente di reindirizzamento. ora che sai di aver colpito un reindirizzamento, devi solo controllare se questo è il reindirizzamento che stai cercando. quindi reindirizza tramite il server. ctx.redirect('https://example/com').

Sono stato in grado di ottenere un reindirizzamento in react-router-dom utilizzando quanto segue

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

Nel mio caso, stavo cercando un modo per reindirizzare gli utenti ogni volta che visitano l'URL di root http://myapp.comda qualche altra parte all'interno dell'app http://myapp.com/newplace. quindi quanto sopra ha aiutato.