React-Router Enlace externo

Solución:

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 hay necesidad de usar <Link /> componente de react-router.

Si desea ir al 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-router elemento para poder mantenerlo en mis rutas. Tal 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

---

---

Utiliza Nuestro Buscador