So erhalten Sie die aktuelle Route in React-Router 2.0.0-rc5

83

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:

  1. Leiten Sie den Benutzer zu weiter, /loginwenn er nicht angemeldet ist
  2. Wenn der Benutzer versucht hat, auf ihn zuzugreifen, /loginwenn er bereits angemeldet ist, leiten Sie ihn an root weiter/

so jetzt versuche ich , Benutzer-Zustand zu lesen Appist 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.

wxtry
quelle

Antworten:

112

Nachdem ich ein weiteres Dokument gelesen hatte, fand ich die Lösung:

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md

Ich muss nur auf die injizierte Eigenschaft locationder Instanz der Komponente zugreifen, wie:

var currentLocation = this.props.location.pathname
wxtry
quelle
5
Es ist in einigen untergeordneten Komponenten nicht verfügbar, aber ich habe es geschafft, sie per Requisite zu übergeben.
Damjan Pavlica
1
Für mich (v2.8.1) war es über this.state.location.pathname(anstelle von Requisiten) verfügbar .
Internet-Nico
2
Sie müssen sicherstellen, dass Sie dies zu Ihrer Komponente hinzufügen static contextTypes = { router: React.PropTypes.object }
Alex Cory
1
Wenn es in Ihren untergeordneten Komponenten nicht verfügbar ist, müssen Sie nur mit withRouter ()
Michael Brown
Danke, der Link ist hilfreich!
Alex Yursha
27

Sie können die aktuelle Route mit abrufen

const currentRoute = this.props.routes[this.props.routes.length - 1];

... mit dem Sie von der aktivsten <Route ...>Komponente der untersten Ebene aus auf die Requisiten zugreifen können .

Gegeben...

<Route path="childpath" component={ChildComponent} />

currentRoute.pathkehrt zurück 'childpath'und currentRoute.componentkehrt zurück function _class() { ... }.

Colllin
quelle
1
Dies ist eine großartige Methode, da alle auf der Route definierten benutzerdefinierten Eigenschaften beibehalten werden. this.props.locationverliert diese benutzerdefinierten Eigenschaften.
XtraSimplicity
Und um die vorherige Route zu erhalten (dh für einen Zurück-Button + Etikett), können Sie verwendenthis.props.routes.length - 2
Devonj
10

Wenn Sie den Verlauf verwenden, fügt der Router alles aus dem Verlauf an den Speicherort ein, z.

this.props.location.pathname;
this.props.location.query;

Kapiert?

einer
quelle
13
Vielleicht können Sie Ihre Antwort erweitern, um mehr Input und einige Referenzen zu haben? im
Moment ist
8

Ab Version 3.0.0 können Sie die aktuelle Route abrufen, indem Sie Folgendes aufrufen:

this.context.router.location.pathname

Beispielcode ist unten:

var NavLink = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },

    render() {   
        return (
            <Link {...this.props}></Link>
        );
    }
});
Sithu
quelle
7

Für alle Benutzer, die 2017 das gleiche Problem hatten, habe ich es folgendermaßen gelöst:

NavBar.contextTypes = {
    router: React.PropTypes.object,
    location: React.PropTypes.object
}

und benutze es so:

componentDidMount () {
    console.log(this.context.location.pathname);
}
Aotik
quelle
1
Wie PropTypesist nun eine eigenständige Abhängigkeit, dachte hinzuzufügen: import PropTypes from 'prop-types'; ... NavBar.contextTypes = { router: PropTypes.object, location: PropTypes.object };
logicalicy
4

In App.jsfügen Sie den folgenden Code und versuchen

window.location.pathname
Tuan Nguyen
quelle
2

Sie können die 'isActive'-Requisite wie folgt verwenden:

const { router } = this.context;
if (router.isActive('/login')) {
    router.push('/');
}

isActive gibt ein wahres oder falsches zurück.

Getestet mit React-Router 2.7

MarvinVK
quelle
0

Funktioniert bei mir genauso:

...
<MyComponent {...this.props}>
  <Route path="path1" name="pname1" component="FirstPath">
  ...
</MyComponent>
...

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

Alex
quelle