Umleitung auf externe URL in React
Wir werden vorstellen, wie man in React zu einer externen URL umleitet.
Umleitung auf externe URL in React
Wann immer wir zu einem anderen Pfad umleiten möchten, können wir den Status ändern, um die Komponente erneut zu rendern. Aber manchmal müssen wir möglicherweise zu einer externen URL umleiten.
Um die Umleitung auf eine externe URL zu verstehen, zeigen wir ein Beispiel.
In diesem Beispiel erstellen wir ein Navigationsmenü, das den Benutzer zu einem externen Link weiterleitet. Zuerst erstellen wir ein div mit der Klasse root in der Datei index.html.
# react
<div id="root"></div>
Als nächstes importieren wir React, render und BrowserRouter.
# react
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
Dann erstellen wir ein Menü.
# react
const Menu = () => (
<div>
<ul>
<li>
<Link to="/privacy-policy">privacy</Link>
</li>
</ul>
</div>
);
Jetzt geben wir in render() einen Umleitungsrouter zurück. Der Code in index.js sieht dann so aus.
# 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'));
Ausgabe:
Immer wenn ein Benutzer auf das Menü privacy klickt, wird er auf eine externe URL umgeleitet.
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