Redirigir a URL externa en React
Presentaremos cómo redirigir a una URL externa en React.
Redirigir a URL externa en React
Siempre que queramos redirigir a otra ruta, podemos cambiar el estado para volver a renderizar el componente. Pero a veces, es posible que necesitemos redirigir a alguna URL externa.
Para entender la redirección a una URL externa, mostraremos un ejemplo.
En este ejemplo, crearemos un menú de navegación que redirigirá al usuario a algún enlace externo. Primero, crearemos un div con clase root en el archivo index.html.
# react
<div id="root"></div>
A continuación, importaremos React, render y BrowserRouter.
# react
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
Luego, crearemos un menú.
# react
const Menu = () => (
<div>
<ul>
<li>
<Link to="/privacy-policy">privacy</Link>
</li>
</ul>
</div>
);
Ahora en render(), devolveremos un enrutador de redirección. El código en index.js se verá así.
# react
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Menu = () => (
<div>
<ul>
<li>
<Link to="/privacy-policy">privacy</Link>
</li>
</ul>
</div>
);
class App extends Component {
constructor() {
super();
this.state = {
name: 'React',
};
}
render() {
return (
<Router>
<div>
<Menu />
<Route
path="/privacy-policy"
component={() => {
window.location.replace('https://example.com/1234');
return null;
}}
/>
</div>
</Router>
);
}
}
render(<App />, document.getElementById('root'));
Producción:
Cada vez que un usuario haga clic en el menú privacy, será redirigido a una URL externa.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn