Cómo obtener la ruta actual en react-router 2.0.0-rc5

83

Tengo un enrutador como el siguiente:

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

Esto es lo que quiero lograr:

  1. Redirigir al usuario a /loginsi no ha iniciado sesión
  2. Si el usuario intentó acceder /logincuando ya había iniciado sesión, redirigirlo a la raíz/

así que ahora estoy tratando de comprobar el estado del usuario en App's componentDidMount, y luego hacer algo como:

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

El problema aquí es que no puedo encontrar la API para obtener la ruta actual.

Encontré que este problema cerrado sugería usar Router.ActiveState mixin y controladores de ruta, pero parece que estas dos soluciones ahora están en desuso.

wxtry
fuente

Respuestas:

112

Después de leer algún documento más, encontré la solución:

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

Solo necesito acceder a la propiedad inyectada locationde la instancia del componente como:

var currentLocation = this.props.location.pathname
wxtry
fuente
5
No está disponible en algunos componentes secundarios, pero logré pasarlos a través de prop.
Damjan Pavlica
1
Para mí (v2.8.1), estaba disponible a través de this.state.location.pathname(en lugar de accesorios).
internet-nico
2
Debe asegurarse de agregar esto a su componente static contextTypes = { router: React.PropTypes.object }
Alex Cory
1
si no está disponible en sus componentes secundarios, solo necesita ajustar usando withRouter ()
Michael Brown
¡Gracias, el enlace es útil!
Alex Yursha
27

Puede obtener la ruta actual usando

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

... que le da acceso a los accesorios del <Route ...>componente activo de nivel más bajo .

Dado...

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

currentRoute.pathdevoluciones 'childpath'y currentRoute.componentdevoluciones function _class() { ... }.

colllin
fuente
1
Este es un gran método, ya que conserva las propiedades personalizadas definidas en la ruta. this.props.locationpierde estas propiedades personalizadas.
XtraSimplicity
Y para obtener la ruta anterior (es decir, para un botón de retroceso + etiqueta) puede usarthis.props.routes.length - 2
devonj
10

Si usa el historial, entonces Router puso todo en la ubicación del historial, como:

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

¿Consíguelo?

uno
fuente
13
¿Puede ser que pueda extender su respuesta, para tener más aportes y algunas referencias? ahora mismo es demasiado general
Farside
8

A partir de la versión 3.0.0, puede obtener la ruta actual llamando a:

this.context.router.location.pathname

El código de muestra está a continuación:

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

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

Para cualquier usuario que tuviera el mismo problema en 2017, lo resolví de la siguiente manera:

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

y utilícelo así:

componentDidMount () {
    console.log(this.context.location.pathname);
}
Aotik
fuente
1
Como PropTypeses ahora una dependencia independiente, pensado para agregar: import PropTypes from 'prop-types'; ... NavBar.contextTypes = { router: PropTypes.object, location: PropTypes.object };
logicalicy
4

En App.jsagregue el siguiente código e intente

window.location.pathname
Tuan Nguyen
fuente
2

Podrías usar el prop 'isActive' así:

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

isActive devolverá verdadero o falso.

Probado con react-router 2.7

MarvinVK
fuente
0

Funciona para mí de la misma manera:

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

Y luego, puedo acceder a "this.props.location.pathname" en la función MyComponent.

Olvidé que era yo soy ...))) El siguiente enlace describe más para hacer la barra de navegación, etc .: reaccionar enrutador this.props.location

Alex
fuente