wake-up-neo.net

So erhalten Sie die aktuelle Route in dem reakt-router 2.0.0-rc5

Ich habe einen Router wie folgt:

<Router history={hashHistory}>
    <Route path="/" component={App}>
        <IndexRoute component={Index}/>
        <Route path="login" component={Login}/>
    </Route>
</Router>

Folgendes möchte ich erreichen:

  1. Umleiten des Benutzers an /login, falls nicht angemeldet
  2. Wenn Benutzer versucht haben, auf /login zuzugreifen, wenn sie bereits angemeldet sind, leiten Sie sie an root_/ weiter.

jetzt versuche ich den Status des Benutzers in Apps componentDidMount zu überprüfen. Dann mache ich etwas wie:

if (!user.isLoggedIn) {
    this.context.router.Push('login')
} else if(currentRoute == 'login') {
    this.context.router.Push('/')
}

Das Problem hierbei ist, dass ich die API nicht finden kann, um die aktuelle Route abzurufen.

Ich fand dieses geschlossene Problem schlug die Verwendung von Router.ActiveState-Mix- und -Route-Handlern vor, aber es sieht so aus, als wären diese beiden Lösungen nun veraltet.

javascriptreactjsreact-router
79
wxtry

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 location der Instanz der Komponente zugreifen:

var currentLocation = this.props.location.pathname
107
wxtry

Sie können die aktuelle Route mit aufrufen 

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

... wodurch Sie auf die Requisiten von der untersten Ebene der aktiven <Route ...>-Komponente zugreifen können.

Gegeben...

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

currentRoute.path gibt 'childpath' zurück und currentRoute.component gibt function _class() { ... } zurück.

27
colllin

Wenn Sie den Verlauf verwenden, hat der Router alles aus dem Verlauf in den Speicherort eingefügt, z.

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

kapiert?

10
one

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

Für alle Benutzer, die 2017 dasselbe 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);
}
7
Aotik

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

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

isActive gibt ein wahr oder falsch zurück.

Getestet mit Reakt-Router 2.7

2
MarvinVK

versuchen Sie es in App.js window.location.pathname

2
Tuan Nguyen

Funktioniert für mich genauso:

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

Und dann kann ich in der Funktion MyComponent auf "this.props.location.pathname" zugreifen.

Ich habe vergessen, dass es ich war ...))) Der folgende Link beschreibt mehr für Make-Navigationsleiste etc .: reag Router this.props.location

0
Alex