javascript - link - react router redirect programmatically

React-Router Enlace externo

Question

Como estoy usando react-router para manejar mis rutas en una aplicación de reacción, tengo curiosidad por saber si hay una manera 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

Estoy encontrando exactamente cero 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"
}

Answer 1

Al usar React with Typecript se 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} />

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

Answer 2

Aquí hay una 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 React pure component para reducir el código del componente a una sola función que, en lugar de representar cualquier cosa, redirige el navegador a una URL externa.

Funciona tanto en React Router 3 como en 4.

Answer 3

En realidad terminé construyendo mi propio Componente. <Redirect> Toma información del elemento react-router para poder mantenerlo 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

Answer 4

No creo que React-Router brinde este soporte. La documentation menciona

Un <Redirigir> configura una redirección a otra ruta en su aplicación para mantener las URL antiguas.

Podrías intentar usar algo como React-Redirect lugar

Answer 5

No es necesario usar el componente <Link /> del 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>

Answer 6

No necesita solicitar un enrutador de reacción. 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'')
  }
}

Answer 7

PARA V3, aunque puede funcionar para V4. Saliendo de la respuesta de Relic, 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;

Answer 8

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

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

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

Answer 9

Si está utilizando el StaticRouter lado del servidor, puede usar StaticRouter . Con su context como props y luego agregando el componente <Redirect path="/somewhere" /> en su aplicación. La idea es que cada vez que reaccionar enrutador coincida con un componente de redireccionamiento, agregará algo al contexto que pasó al enrutador estático para hacerle saber que su ruta coincide con un componente de redireccionamiento. ahora que sabe que ha alcanzado una redirección, solo necesita verificar si esa es la redirección que está buscando. luego simplemente redirige a través del servidor. ctx.redirect(''https://example/com'') .

Answer 10

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.

Utiliza el 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''}
/>