Як отримати поточний маршрут у реактор-маршрутизаторі 2.0.0-rc5

У мене є маршрутизатор, як показано нижче:

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

Ось чого я хочу досягти:

1. Перенаправити користувача, /loginякщо він не ввійшов у систему
2. Якщо користувач намагався отримати доступ, /loginколи він уже ввійшов у систему, перенаправіть його на root/

так що тепер я намагаюся перевірити стан користувача в App«з componentDidMount, а потім зробити що - щось на кшталт:

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

Проблема в тому, що я не можу знайти API для отримання поточного маршруту.

Я виявив, що це закрите питання пропонується використовувати суміш Router.ActiveState і обробники маршрутів, але, схоже, ці два рішення зараз застаріли.

Прочитавши ще якийсь документ, я знайшов рішення:

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

Мені просто потрібно отримати доступ до введеної властивості locationекземпляра компонента, наприклад:

var currentLocation = this.props.location.pathname

Ви можете отримати поточний маршрут за допомогою

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

... що надає вам доступ до реквізиту від активного <Route ...>компонента найнижчого рівня .

Враховуючи ...

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

currentRoute.pathповертається 'childpath'і currentRoute.componentповертається function _class() { ... }.

Якщо ви використовуєте історію, тоді маршрутизатор розміщує все в розташуванні з історії, наприклад:

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

зрозуміти?

Починаючи з версії 3.0.0, ви можете отримати поточний маршрут, зателефонувавши:

this.context.router.location.pathname

Зразок коду нижче:

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

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

Для всіх користувачів, які мали таку саму проблему в 2017 році, я вирішив це наступним чином:

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

і використовувати його так:

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

У App.jsдодайте нижче код і спробувати

window.location.pathname

Ви можете скористатися підтримкою 'isActive' так:

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

isActive поверне true або false.

Тестується на реакційному маршрутизаторі 2.7

Працює для мене так само:

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

А потім я можу отримати доступ до "this.props.location.pathname" у функції MyComponent.

Я забув, що це я ...))) Наступне посилання описує більше для навігаційної панелі make і т. Д.

Спробуйте схопити шлях, використовуючи: document.location.pathname

У Javascript ви можете вказати поточну URL-адресу частинами. Перевірте: https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/