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

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.

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

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() { ... }.

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?

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>
        );
    }
});

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);
}

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

window.location.pathname

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

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

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/