Как получить текущий маршрут в реактивном маршрутизаторе 2.0.0-rc5

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

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

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

  • Перенаправить пользователя на /login, если он не вошел в систему
  • Если пользователь попытался получить доступ к /login, когда они уже вошли в систему, перенаправьте их на root /

поэтому теперь я пытаюсь проверить состояние пользователя в App componentDidMount, затем сделайте что-то вроде:

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

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

Я нашел этот закрытый вопрос, предлагаемый с использованием Router.ActiveState mixin и обработчиков маршрутов, но похоже, что эти два решения теперь устарели.

Ответы

Ответ 2

Вы можете получить текущий маршрут, используя

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

..., который дает вам доступ к реквизитам с активного компонента <Route ...> самого низкого уровня.

Учитывая,...

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

currentRoute.path возвращает 'childpath' и currentRoute.component возвращает function _class() { ... }.

Ответ 3

Если вы используете историю, то Router помещает все в место из истории, например:

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

получить его?

Ответ 4

Начиная с версии 3.0.0, вы можете получить текущий маршрут, вызвав:

this.context.router.location.pathname

Пример кода ниже:

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

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

Ответ 5

Для пользователей, имеющих одну и ту же проблему в 2017 году, я решил ее следующим образом:

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

и используйте его следующим образом:

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

Ответ 6

Вы можете использовать прообраз 'isActive' следующим образом:

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

isActive вернет true или false.

Протестировано с помощью маршрутизатора 2.7

Ответ 7

В App.js добавьте приведенный ниже код и попробуйте

window.location.pathname

Ответ 8

У меня работает так же:

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

И тогда я могу получить доступ к "this.props.location.pathname" в функции MyComponent.

Я забыл, что это я...))) Следующая ссылка описывает больше для сделать навигационную панель и т.д.: реагировать маршрутизатор this.props.location