javascript - link - Cómo obtener la ruta actual en react-router 2.0.0-rc5
react-router-dom redirect (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á abajo:
var NavLink = React.createClass({
contextTypes: {
router: React.PropTypes.object
},
render() {
return (
<Link {...this.props}></Link>
);
}
});
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:
-
Redirigir usuario
/login
si no ha iniciado sesión -
Si el usuario intentó acceder
/login
cuando ya inició sesión, rediríjalo a root/
así que ahora estoy tratando de verificar el estado del usuario en el
componentDidMount
, luego hago 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.
Después de leer más documentos, encontré la solución:
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md
Solo necesito acceder a la
location
de la propiedad inyectada de la instancia del componente como:
var currentLocation = this.props.location.pathname
En
App.js
agregue el siguiente código e intente
window.location.pathname
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 .: react router this.props.location
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);
}
Podrías usar el accesorio ''isActive'' de esta manera:
const { router } = this.context;
if (router.isActive(''/login'')) {
router.push(''/'');
}
isActive devolverá un verdadero o falso.
Probado con react-router 2.7
Puede obtener la ruta actual usando
const currentRoute = this.props.routes[this.props.routes.length - 1];
... que le da acceso a los accesorios desde el componente activo
<Route ...>
nivel más bajo.
Dado...
<Route path="childpath" component={ChildComponent} />
currentRoute.path
devuelve
''childpath''
y
currentRoute.component
devuelve la
function _class() { ... }
.
Si usa el historial, el enrutador coloca todo en la ubicación desde el historial, como:
this.props.location.pathname;
this.props.location.query;
¿Consíguelo?