Ich habe einen Router wie unten:
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Index}/>
<Route path="login" component={Login}/>
</Route>
</Router>
Folgendes möchte ich erreichen:
- Leiten Sie den Benutzer zu weiter,
/login
wenn er nicht angemeldet ist - Wenn der Benutzer versucht hat, auf ihn zuzugreifen,
/login
wenn er bereits angemeldet ist, leiten Sie ihn an root weiter/
so jetzt versuche ich , Benutzer-Zustand zu lesen App
ist componentDidMount
, dann so etwas wie:
if (!user.isLoggedIn) {
this.context.router.push('login')
} else if(currentRoute == 'login') {
this.context.router.push('/')
}
Das Problem hier ist, dass ich die API zum Abrufen der aktuellen Route nicht finden kann.
Ich fand dieses geschlossene Problem mit der Verwendung von Router.ActiveState-Mixin- und Routen-Handlern vorgeschlagen, aber es sieht so aus, als wären diese beiden Lösungen jetzt veraltet.
javascript
reactjs
react-router
wxtry
quelle
quelle
this.state.location.pathname
(anstelle von Requisiten) verfügbar .static contextTypes = { router: React.PropTypes.object }
Sie können die aktuelle Route mit abrufen
... mit dem Sie von der aktivsten
<Route ...>
Komponente der untersten Ebene aus auf die Requisiten zugreifen können .Gegeben...
currentRoute.path
kehrt zurück'childpath'
undcurrentRoute.component
kehrt zurückfunction _class() { ... }
.quelle
this.props.location
verliert diese benutzerdefinierten Eigenschaften.this.props.routes.length - 2
Wenn Sie den Verlauf verwenden, fügt der Router alles aus dem Verlauf an den Speicherort ein, z.
Kapiert?
quelle
Ab Version 3.0.0 können Sie die aktuelle Route abrufen, indem Sie Folgendes aufrufen:
Beispielcode ist unten:
quelle
Für alle Benutzer, die 2017 das gleiche Problem hatten, habe ich es folgendermaßen gelöst:
und benutze es so:
quelle
PropTypes
ist nun eine eigenständige Abhängigkeit, dachte hinzuzufügen:import PropTypes from 'prop-types'; ... NavBar.contextTypes = { router: PropTypes.object, location: PropTypes.object };
In
App.js
fügen Sie den folgenden Code und versuchenquelle
Sie können die 'isActive'-Requisite wie folgt verwenden:
isActive gibt ein wahres oder falsches zurück.
Getestet mit React-Router 2.7
quelle
Funktioniert bei mir genauso:
Und dann kann ich in der MyComponent-Funktion auf "this.props.location.pathname" zugreifen.
Ich habe vergessen, dass ich es war ...))) Der folgende Link beschreibt mehr für die Navigationsleiste usw.: Reagiere Router this.props.location
quelle
Versuchen Sie, den Pfad zu ermitteln, indem Sie:
document.location.pathname
In Javascript können Sie die aktuelle URL in Teilen angeben. Überprüfen Sie heraus: https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/
quelle