Pregunta Cómo obtener la ruta actual en reaccionar-enrutador 2.0.0-rc5


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 usuario a /login si no estás conectado
  2. Si el usuario intentó acceder /login cuando ya hayan iniciado sesión, redirigirlos a la raíz /

así que ahora estoy tratando de verificar el estado del usuario en Appes componentDidMount, luego haz 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é este problema cerrado sugirió usar Router.ActiveState mixin y manejadores de ruta, pero parece que estas dos soluciones ahora están en desuso.


74
2018-01-27 08:13


origen


Respuestas:


Después de leer un 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 location de la instancia del componente como:

var currentLocation = this.props.location.pathname

97
2018-01-28 04:58



Puedes obtener la ruta actual usando

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

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

Dado...

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

currentRoute.path devoluciones 'childpath' y currentRoute.component devoluciones function _class() { ... }.


27
2017-09-26 18:52



Si usa el historial, el enrutador colocará todo en la ubicación desde el historial, como por ejemplo:

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

¿Consíguelo?


10
2018-05-22 17:07



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

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>
        );
    }
});

8
2017-12-09 19:28



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

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

y úsalo así:

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

7
2018-02-14 13:06



Podría usar el accesorio 'isActive' de la siguiente manera:

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

isActive devolverá un verdadero o falso.

Probado con react-router 2.7


2
2017-11-08 10:02



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 ...))) El siguiente enlace describe más para hacer una barra de navegación, etc. reaccionar router this.props.location


0
2017-09-19 22:39