Jak uzyskać aktualną trasę w React-router 2.0.0-rc5

Mam router jak poniżej:

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

Oto, co chcę osiągnąć:

1. Przekieruj użytkownika do, /loginjeśli nie jest zalogowany
2. Jeśli użytkownik próbował uzyskać dostęp, /logingdy jest już zalogowany, przekieruj go do roota/

więc teraz próbuję sprawdzić stan użytkownika w App„s componentDidMount, a następnie zrobić coś takiego:

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

Problem polega na tym, że nie mogę znaleźć interfejsu API, aby uzyskać aktualną trasę.

Znalazłem ten zamknięty problem sugerowany przy użyciu funkcji obsługi miksu i tras Router.ActiveState, ale wygląda na to, że te dwa rozwiązania są teraz przestarzałe.

Po przeczytaniu kolejnego dokumentu znalazłem rozwiązanie:

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

Muszę tylko uzyskać dostęp do wstrzykniętej właściwości locationwystąpienia komponentu, na przykład:

var currentLocation = this.props.location.pathname

Możesz uzyskać aktualną trasę za pomocą

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

... co daje dostęp do rekwizytów z aktywnego <Route ...>komponentu najniższego poziomu .

Dany...

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

currentRoute.pathwraca 'childpath'i currentRoute.componentwraca function _class() { ... }.

Jeśli używasz historii, Router umieści wszystko w lokalizacji z historii, na przykład:

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

zdobyć?

Od wersji 3.0.0 aktualną trasę można uzyskać dzwoniąc pod numer:

this.context.router.location.pathname

Przykładowy kod znajduje się poniżej:

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

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

Dla wszystkich użytkowników, którzy mieli ten sam problem w 2017 roku, rozwiązałem go w następujący sposób:

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

i użyj go w ten sposób:

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

W App.jsdodać poniższy kod i spróbuj

window.location.pathname

Możesz użyć właściwości „isActive” w następujący sposób:

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

isActive zwróci wartość true lub false.

Przetestowano za pomocą React-router 2.7

U mnie działa w ten sam sposób:

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

Następnie mogę uzyskać dostęp do „this.props.location.pathname” w funkcji MyComponent.

Zapomniałem, że to ja ...))) Poniższy link opisuje więcej dla paska nawigacji itp .: zareaguj router this.props.location

Spróbuj złapać ścieżkę za pomocą: document.location.pathname

W JavaScript możesz aktualny adres URL w częściach. Sprawdź: https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/