React-Router Enlace externo

Como estoy usando react-router para manejar mis rutas en una aplicación de reacción, tengo curiosidad por saber si hay una forma de redirigir a un recurso externo.

Digamos que alguien golpea:

example.com/privacy-policy

Me gustaría redirigir a:

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

No encuentro exactamente ninguna ayuda para evitar escribirlo en JS simple en mi index.html cargando con algo como:

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

Aquí hay una sola línea para usar React Router para redirigir a un enlace externo:

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

Utiliza el concepto de componente puro de React para reducir el código del componente a una sola función que, en lugar de representar nada, redirige el navegador a una URL externa.

Funciona tanto en React Router 3 como en 4.

No es necesario utilizar <Link />componentes de react-router.

Si desea ir a un enlace externo, use una etiqueta de anclaje.

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

De hecho, terminé construyendo mi propio Componente. <Redirect> Toma información del react-routerelemento para que pueda mantenerla en mis rutas. Como:

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

Aquí está mi componente en caso de que alguien tenga curiosidad:

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;

EDITAR - NOTA: Esto es con react-router: 3.0.5 , no es tan simple en 4.x

No necesita solicitar reaccionar enrutador. Esta acción se puede realizar de forma nativa y la proporciona el navegador.

Solo usa window.location

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

Con el componente Link de react-router puedes hacerlo. En la opción " a " puede especificar 3 tipos de datos:

• una cadena : una representación de cadena de la ubicación del enlace, creada mediante la concatenación del nombre de ruta, la búsqueda y las propiedades hash de la ubicación.
• un objeto : un objeto que puede tener cualquiera de las siguientes propiedades:
  • nombre de ruta : una cadena que representa la ruta de acceso.
  • búsqueda : una representación de cadena de parámetros de consulta.
  • hash : un hash para poner en la URL, por ejemplo, # a-hash.
  • estado : estado para persistir en la ubicación.
• una función : una función a la que se pasa la ubicación actual como argumento y que debe devolver la representación de la ubicación como una cadena o como un objeto

Para su ejemplo (enlace externo):

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

Puede hacer lo siguiente:

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

También puede pasar los accesorios en los que le gustaría estar, como título, identificación, nombre de clase, etc.

Usando parte de la información aquí, se me ocurrió el siguiente componente que puede usar dentro de sus declaraciones de ruta. Es compatible con React Router v4.

Está usando mecanografiado, pero debería ser bastante sencillo convertirlo a 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;
      }}
    />
  );
};

Y usar con:

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

Tuve suerte con esto:

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

No creo que React-Router proporcione este soporte. La documentación menciona

Un <Redirect> configura un redireccionamiento a otra ruta en su aplicación para mantener las URL antiguas.

Puede intentar usar algo como React-Redirect en su lugar

Para ampliar la respuesta de Alan, puede crear un <Route/>que redirija a todos<Link/> los atributos "a" que contengan "http:" o "https:" al recurso externo correcto.

A continuación se muestra un ejemplo funcional de esto que se puede colocar directamente en su archivo <Router>.

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

PARA V3, aunque puede funcionar para V4. Saliendo de la respuesta de Eric, necesitaba hacer un poco más, como manejar el desarrollo local donde 'http' no está presente en la URL. También estoy redirigiendo a otra aplicación en el mismo servidor.

Agregado al archivo del enrutador:

import RedirectOnServer from './components/RedirectOnServer';

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

Y el 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;

Al usar React con TypeScript, obtiene un error ya que la función debe devolver un elemento react, no void. Así que lo hice de esta manera usando el método de renderizado de ruta (y usando React router v4):

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

Donde en su lugar también podría usar window.location.assign(), window.location.replace()etc.

Si está utilizando el desgarro del lado del servidor, puede utilizar StaticRouter. Con su contextas propsy luego agregando <Redirect path="/somewhere" />componente en su aplicación. La idea es que cada vez que react-router coincida con un componente de redireccionamiento, agregará algo en el contexto que pasó al enrutador estático para hacerle saber que su ruta coincide con un componente de redireccionamiento. ahora que sabe que ha accedido a una redirección, solo tiene que comprobar si esa es la redirección que está buscando. luego simplemente redirigir a través del servidor. ctx.redirect('https://example/com').

Pude lograr una redirección en react-router-dom usando lo siguiente

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

En mi caso, estaba buscando una forma de redirigir a los usuarios cada vez que visitan la URL raíz http://myapp.coma otro lugar dentro de la aplicación http://myapp.com/newplace. así que lo anterior ayudó.