Tengo la siguiente configuración del enrutador
<Router history={history}> <Route path="/" component={ReviewWizard}> <IndexRoute component={Administrative}/> <Route path="Administrative" component=Administrative}> <Route path="/Administrative/:itemId" component={AdministrativeItem}/> </Route> <Route path="Offense" component={Offense}/> </Route> </Router> Estoy tratando de obtener un segmento de ruta actualmente activo (es decir Administrative u Offense ).
¿Hay alguna manera de hacer algo como esto? es decir, restricciones de ruta
<Router history={history}> <Route path="/:segment" component={ReviewWizard}> <IndexRoute component={Administrative}/> <Route path="/:segment=Administrative/:itemId" component={Administrative}> <Route path="/Administrative/:itemId" component={AdministrativeItem}/> </Route> <Route path="/:segment=Offense" component={Offense}/> </Route> </Router> Si no, ¿cuál es la mejor práctica para obtener el segmento de ruta activo actual? No me gusta this.context.router.routes[1].path
En primer lugar, recomendaría la siguiente configuración del enrutador, ya que parece que es lo que está buscando:
<Router history={history}> <Route path="/" component={ReviewWizard}> <!-- whenever we hit '/' we redirect to '/Administrative' --> <IndexRedirect path="/Administrative"/> <!-- Renders ReviewWizard <- Administrative --> <Route path="/Administrative" component={Administrative}> <!-- Renders ReviewWizard <- Administrative <- AdministrativeItem --> <Route path="/Administrative/:itemId" component={AdministrativeItem}/> </Route> <!-- Renders ReviewWizard <- Offense --> <Route path="/Offense" component={Offense}/> </Route> </Router> En cuanto a la detección de la ruta actualmente activa (o si un fragmento de ruta está activo), recomendaría usar el método router.isActive . Simplemente haz algo como esto:
if (router.isActive('/Administrative')) { doSomething() } else if (router.isActive('/Offense')) { doSomethingElse() } Para algo más declarativo, recomiendo simplemente usar el objeto de ubicación que react-router inyecta en cada componente que administra:
const { location: { pathname } } = this.props const [ activeSegment ] = pathname.slice(1).split('/')¡Espero que esto ayude!