tutorial react link example javascript reactjs react-router

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:

  1. Redirigir usuario /login si no ha iniciado sesión
  2. 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.



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?