Como obter a rota atual no react-router 2.0.0-rc5


83

Eu tenho um roteador como abaixo:

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

Aqui está o que eu quero alcançar:

  1. Redirecionar o usuário para /loginse não estiver conectado
  2. Se o usuário tentou acessar /loginquando já estava logado, redirecione-o para o root/

agora estou tentando verificar o estado do usuário em App's componentDidMount, e fazer algo como:

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

O problema aqui é que não consigo encontrar a API para obter a rota atual.

Descobri que este problema encerrado sugeria o uso de mixin Router.ActiveState e manipuladores de rota, mas parece que essas duas soluções agora estão obsoletas.

Respostas:


112

Depois de ler mais alguns documentos, encontrei a solução:

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

Eu só preciso acessar a propriedade injetada locationda instância do componente como:

var currentLocation = this.props.location.pathname

5
Não está disponível em alguns componentes filhos, mas consegui transmiti-los via prop.
Damjan Pavlica

1
Para mim (v2.8.1), estava disponível via this.state.location.pathname(em vez de adereços).
Internet-nico

2
Você precisa ter certeza de adicionar isto ao seu componente static contextTypes = { router: React.PropTypes.object }
Alex Cory

1
se não estiver disponível em seus componentes filhos, você só precisa agrupar usando withRouter ()
Michael Brown

Obrigado, o link é útil!
Alex Yursha

27

Você pode obter a rota atual usando

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

... que lhe dá acesso aos adereços do <Route ...>componente ativo de nível mais baixo .

Dado...

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

currentRoute.pathdevoluções 'childpath'e currentRoute.componentdevoluções function _class() { ... }.


1
Este é um ótimo método, pois retém todas as propriedades personalizadas definidas na rota. this.props.locationperde essas propriedades personalizadas.
XtraSimplicity

E para obter a rota anterior (ou seja, para um botão Voltar + etiqueta), você pode usarthis.props.routes.length - 2
devonj

10

Se você usar o histórico, o Roteador colocará tudo no local do histórico, como:

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

pegue?


13
pode ser que você pode estender sua resposta, para ter mais informações e algumas referências? agora é muito geral
Farside

8

A partir da versão 3.0.0, você pode obter a rota atual chamando:

this.context.router.location.pathname

O código de amostra está abaixo:

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

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

7

Para todos os usuários com o mesmo problema em 2017, resolvi da seguinte maneira:

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

e use-o assim:

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

1
Como PropTypesagora é uma dependência autônoma, pensei em adicionar: import PropTypes from 'prop-types'; ... NavBar.contextTypes = { router: PropTypes.object, location: PropTypes.object };
lógico

4

Em App.jsadicionar o código abaixo e tentativa

window.location.pathname

2

Você pode usar o prop 'isActive' assim:

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

isActive retornará verdadeiro ou falso.

Testado com react-router 2.7


0

Funciona para mim da mesma maneira:

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

E então, posso acessar "this.props.location.pathname" na função MyComponent.

Esqueci que era ...))) O link a seguir descreve mais sobre a barra de navegação do make etc .: react router this.props.location


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.