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

83

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

<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 и обработчиков маршрутов, но похоже, что эти два решения теперь устарели.

javascript reactjs react-router wxtry
источник

Ответы:

112

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

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

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

var currentLocation = this.props.location.pathname
wxtry
источник
5
Он недоступен в некоторых дочерних компонентах, но мне удалось передать их через prop.
Damjan Pavlica
1
Для меня (v2.8.1) это было доступно через this.state.location.pathname(вместо props).
internet-nico
2
Вы должны обязательно добавить это в свой компонент static contextTypes = { router: React.PropTypes.object }
Alex Cory
1
если он недоступен в ваших дочерних компонентах, вам просто нужно обернуть его с помощью withRouter ()
Майкл Браун
Спасибо, ссылка помогла!
Алекс Юрша
27

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

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

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

Дано...

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

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

Коллин
источник
1
Это отличный метод, поскольку он сохраняет все настраиваемые свойства, определенные в маршруте. this.props.locationтеряет эти настраиваемые свойства.
XtraSimplicity
А чтобы получить предыдущий маршрут (т.е. для кнопки «Назад» + ярлык), вы можете использоватьthis.props.routes.length - 2
devonj
10

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

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

возьми?

один
источник
13
Может быть, вы можете расширить свой ответ, чтобы получить больше информации и ссылок? сейчас это слишком общее
Farside
8

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

this.context.router.location.pathname

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

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

    render() {   
        return (
            <Link {...this.props}></Link>
        );
    }
});
Ситу
источник
7

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

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

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

componentDidMount () {
    console.log(this.context.location.pathname);
}
Аотик
источник
1
Поскольку PropTypesтеперь это отдельная зависимость, подумал добавить: import PropTypes from 'prop-types'; ... NavBar.contextTypes = { router: PropTypes.object, location: PropTypes.object };
logicicy
4

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

window.location.pathname
Туан Нгуен
источник
2

Вы можете использовать опору isActive так:

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

isActive вернет истину или ложь.

Протестировано с помощью response-router 2.7

MarvinVK
источник
0

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

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

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

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

Alex
источник