Wie aktuelle Route in reagieren-Router 2.0.0-RC5

Question

Ich habe bekommen unten einen Router wie:

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

Hier ist, was ich erreichen will:

1. Redirect Benutzer /login nicht, wenn angemeldet
2. Wenn Benutzer /login zuzugreifen versucht, wenn sie bereits angemeldet sind, leiten sie /

zu verankern

so jetzt wie Benutzer-Zustand in App ‚s componentDidMount, dann etwas tun, um zu überprüfen Ich versuche:

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

Das Problem hier ist, ich nicht den API aktuelle Route finden zu bekommen.

Ich habe this closed issue vorgeschlagen mit Router.ActiveState Mixin und Route-Handler, aber es sieht aus wie diese beiden Lösungen sind jetzt veraltet.

Answer 1

Nach etwas mehr Dokument zu lesen, fand ich die Lösung:

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

Ich brauche nur die injizierte Eigenschaft zuzugreifen location der Instanz der Komponente wie:

var currentLocation = this.props.location.pathname 

Answer 2

Wenn Sie Verwenden Sie den Verlauf, dann Router alles in den Speicherort aus dem Verlauf, wie zum Beispiel:

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

get it?

Answer 3

Sie können die aktuelle Route

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

... mit bekommen, die Sie aus der untersten Ebene <Route ...> Komponente aktiven Zugriff auf die Requisiten gibt.

Gegeben ...

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

currentRoute.path kehrt 'childpath' und currentRoute.component kehrt function _class() { ... }.

Answer 4

könnten Sie verwenden, um die Stütze 'isActive' wie folgt:

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

isActive ein wahr oder falsch zurück.

Getestet mit reagieren-Router 2.7

Answer 5

Ab Version 3.0.0 können Sie die aktuelle Route erhalten durch den Aufruf:

this.context.router.location.

Pfadname

Beispielcode ist unten:

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

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

Answer 6

Für alle Benutzer im Jahr 2017 das gleiche Problem haben, ich die folgende Weise gelöst:

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

und es wie folgt verwendet werden:

componentDidMount() { 
    console.log(this.context.location.pathname); 
} 

Answer 7

Funktioniert für mich in der gleichen Weise:

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

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

Ich habe vergessen, dass ich es war, bin ...))) Der Link für die Navigation mehr beschreibt bar etc .: react router this.props.location