it-swarm.com.ru

Как получить текущий маршрут в response-router 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's componentDidMount, а затем сделать что-то вроде:

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

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

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

82
wxtry

Прочитав еще один документ, я нашел решение:

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

Мне просто нужно получить доступ к внедренному свойству location экземпляра компонента, например:

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

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

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

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

Дано...

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

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

27
colllin

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

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

возьми?

10
one

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

this.context.router.location.pathname

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

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

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

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

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

и используйте это так:

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

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

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

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

Протестировано с реакции-роутером 2.7

2
MarvinVK

попробуй в app.js window.location.pathname

2
Tuan Nguyen

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

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

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

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

0
Alex