Ich bin neu bei React Router und erfahre, dass es so viele Möglichkeiten gibt, eine Seite umzuleiten:
Verwenden von
browserHistory.push("/path")
import { browserHistory } from 'react-router'; //do something... browserHistory.push("/path");
Verwenden von
this.context.router.push("/path")
class Foo extends React.Component { constructor(props, context) { super(props, context); //do something... } redirect() { this.context.router.push("/path") } } Foo.contextTypes = { router: React.PropTypes.object }
In React Router v4 gibt es
this.context.history.push("/path")
undthis.props.history.push("/path")
. Details: Wie kann ich in React Router v4 zum Verlauf wechseln?
Ich bin so verwirrt von all diesen Optionen. Gibt es eine beste Möglichkeit, eine Seite umzuleiten?
reactjs
redux
react-router
Liutong Chen
quelle
quelle
withRouter
Antworten:
Eigentlich hängt es von Ihrem Anwendungsfall ab.
1) Sie möchten Ihre Route vor nicht autorisierten Benutzern schützen
In diesem Fall können Sie die aufgerufene Komponente verwenden
<Redirect />
und die folgende Logik implementieren:Denken Sie daran, dass Sie, wenn Sie
<Redirect />
wie erwartet arbeiten möchten , diese in die Rendermethode Ihrer Komponente einfügen sollten, damit sie schließlich als DOM-Element betrachtet werden kann, da sie sonst nicht funktioniert.2) Sie möchten nach einer bestimmten Aktion umleiten (z. B. nach dem Erstellen eines Elements).
In diesem Fall können Sie den Verlauf verwenden:
oder
Um Zugriff auf den Verlauf zu erhalten, können Sie Ihre Komponente mit einem aufgerufenen HOC umschließen
withRouter
. Wenn Sie Ihre Komponente damit umwickeln, geht sie vorbeimatch
location
undhistory
stützt. Weitere Informationen finden Sie in der offiziellen Dokumentation zu withRouter .Wenn Ihre Komponente ein Kind eines ist
<Route />
Komponente, das heißt , wenn es so etwas wie ist<Route path='/path' component={myComponent} />
, müssen Sie nicht Ihre Komponente wickeln mitwithRouter
, weil<Route />
Pässematch
,location
undhistory
zu seinem Kind.3) Weiterleiten nach Klicken auf ein Element
Hier gibt es zwei Möglichkeiten. Sie können es verwenden,
history.push()
indem Sie es an einonClick
Ereignis übergeben:oder Sie können eine
<Link />
Komponente verwenden:Ich denke, die Faustregel in diesem Fall ist, zuerst zu versuchen, es zu verwenden
<Link />
, ich nehme an, besonders wegen der Leistung.quelle
history
diesthis.props.history.push('/path')
, dass die Komponente ein untergeordnetes Element von ist<Route/>
oder dass derwithRouter
Wrapper beim Export korrekt ist , da die Komponente in ihren Requisiten in der Lage ist, dies zu tun .<Route path='/path' component={Comp}/>
. Ich denke, nurrender() { return <Comp/>}
in einem Zustand?this.props.history
aber ich bin nicht sicher, ob ich Ihre zweite Frage richtig habe? Was meinst du genau damitroute to another component
?Jetzt mit React-Router
v15.1
und weiter können wiruseHistory
einbinden. Dies ist ein super einfacher und klarer Weg. Hier ist ein einfaches Beispiel aus dem Quellblog.Sie können dies in jeder Funktionskomponente und in benutzerdefinierten Hooks verwenden. Und ja, dies funktioniert nicht mit Klassenkomponenten wie mit jedem anderen Hook.
Weitere Informationen hierzu finden Sie hier https://reacttraining.com/blog/react-router-v5-1/#usehistory
quelle
Sie können auch die React Router Dom Library verwenden. UseHistory;
https://reactrouter.com/web/api/Hooks/usehistory
quelle
Sie können auch
Redirect
innerhalb derRoute
folgenden. Dies gilt für die Behandlung ungültiger Routen.quelle
Eine der einfachsten Möglichkeiten: Verwenden Sie Link wie folgt:
Wenn wir den gesamten Div-Abschnitt als Link behandeln möchten:
quelle