web-dev-qa-db-fra.com

Comment obtenir la route actuelle dans react-router 2.0.0-rc5

J'ai un routeur comme ci-dessous:

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

Voici ce que je veux réaliser:

  1. Rediriger l'utilisateur vers /login s'il n'est pas connecté
  2. Si l'utilisateur a essayé d'accéder à /login alors qu'il est déjà connecté, redirigez-le vers la racine /

alors maintenant j'essaie de vérifier l'état de l'utilisateur dans App's componentDidMount, puis faire quelque chose comme:

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

Le problème ici est que je ne trouve pas l'API pour obtenir l'itinéraire actuel.

J'ai trouvé ce problème fermé suggéré d'utiliser des gestionnaires de mixage et de routage Router.ActiveStateState, mais il semble que ces deux solutions soient désormais obsolètes.

javascriptreactjsreact-router
79
wxtry

Après avoir lu un peu plus de document, j'ai trouvé la solution:

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

J'ai juste besoin d'accéder à la propriété injectée location de l'instance du composant comme:

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

Vous pouvez obtenir l'itinéraire actuel en utilisant 

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

... qui vous donne accès aux accessoires du composant <Route ...> actif le plus bas.

Donné...

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

currentRoute.path renvoie 'childpath' et currentRoute.component renvoie function _class() { ... }.

27
colllin

Si vous utilisez l'historique, alors le routeur place tout dans l'emplacement de l'historique, tel que:

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

trouver?

10
one

Depuis la version 3.0.0, vous pouvez obtenir l'itinéraire actuel en appelant:

this.context.router.location.pathname

Exemple de code est ci-dessous:

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

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

Pour tous les utilisateurs ayant le même problème en 2017, je l'ai résolu de la manière suivante:

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

et l'utiliser comme ça:

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

Vous pouvez utiliser le prop 'isActive' comme ceci:

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

isActive retournera un vrai ou un faux.

Testé avec react-router 2.7

2
MarvinVK

essayez dans App.js window.location.pathname

2
Tuan Nguyen

Fonctionne pour moi de la même manière:

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

Et puis, je peux accéder à "this.props.location.pathname" dans la fonction MyComponent.

J'avais oublié que c’était ce que je suis ...))) Le lien suivant en dit plus sur la barre de navigation, etc: réagir routeur this.props.location

0
Alex