Rediriger vers une URL externe dans React
Nous allons vous présenter comment rediriger vers une URL externe dans React.
Rediriger vers une URL externe dans React
Chaque fois que nous voulons rediriger vers un autre chemin, nous pouvons changer l’état pour restituer le composant. Mais parfois, nous pouvons avoir besoin de rediriger vers une URL externe.
Pour comprendre la redirection vers une URL externe, nous allons montrer un exemple.
Dans cet exemple, nous allons créer un menu de navigation qui redirigera l’utilisateur vers un lien externe. Dans un premier temps, nous allons créer un div de classe root dans le fichier index.html.
# react
<div id="root"></div>
Ensuite, nous allons importer React, render et BrowserRouter.
# react
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
Ensuite, nous allons créer un menu.
# react
const Menu = () => (
<div>
<ul>
<li>
<Link to="/privacy-policy">privacy</Link>
</li>
</ul>
</div>
);
Maintenant dans render(), nous allons retourner un routeur de redirection. Le code dans index.js ressemblera à ceci.
# 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'));
Production :
Chaque fois qu’un utilisateur cliquera sur le menu privacy, il sera redirigé vers une URL externe.
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