reactjs - link - Rutas anidadas en reaccion-router

react-router-native

Question

Estoy configurando algunas rutas anidadas dentro de React-Router (v0.11.6 es contra lo que estoy trabajando), pero cada vez que intento acceder a una de las rutas anidadas, se activa la ruta principal.

Mis rutas se ven así:

<Route handler={App}>
    <Route name="home" path="/" handler={availableRoutes.Splash} />
    <DefaultRoute handler={availableRoutes.Splash} />

    <Route name="dashboard" handler={availableRoutes.Dashboard}>
        <Route name="dashboard-child" handler={availableRoutes.DashboardChild} />
   </Route>

    <NotFoundRoute handler={NotFound} />
</Route>

Si colapso las rutas para arriba se ve así:

<Route handler={App}>
    <Route name="home" path="/" handler={availableRoutes.Splash} />
    <DefaultRoute handler={availableRoutes.Splash} />

    <Route name="dashboard" handler={availableRoutes.Dashboard} />
    <Route name="dashboard-child" path="/dashboard/dashboard-child" handler={availableRoutes.DashboardChild} />

    <NotFoundRoute handler={NotFound} />
</Route>

Funciona bien. La razón por la que estaba anidando fue porque tendré varios hijos en el "panel" y los quise a todos con el prefijo en la URL.

Answer 1

Aquí hay una actualización de la respuesta de @ bjfletcher para react-router 1.0.0. Como se indica en la guía de actualización :

RouteHandler se ha ido. Router ahora rellena automáticamente this.props.children de sus componentes en función de la ruta activa.

Así que en lugar de

<div><h1>Dashboard</h1><RouteHandler /></div>

usted usaría:

<div><h1>Dashboard</h1>{this.props.children}</div>

Answer 2

La configuración no se trata del enrutamiento (a pesar del nombre), sino de los diseños controlados por rutas.

Entonces, con esta configuración:

<Route name="dashboard" handler={availableRoutes.Dashboard}>
  <Route name="dashboard-child" handler={availableRoutes.DashboardChild} />
</Route>

Está diciendo que dashboard-child debe estar incrustado dentro de dashboard . Cómo funciona esto es que si el dashboard tiene algo como esto:

<div><h1>Dashboard</h1><RouteHandler /></div>

y dashboard-child tiene:

<h2>I''m a child of dashboard.</h2>

Entonces, para el dashboard ruta no hay un elemento secundario incrustado debido a que no hay una ruta coincidente, lo que resulta en esto:

<div><h1>Dashboard</h1></div>

Y para el dashboard/dashboard-child ruta dashboard/dashboard-child el elemento secundario integrado tiene una ruta coincidente, lo que resulta en esto:

<div><h1>Dashboard</h1><h2>I''m a child of dashboard.</h2></div>

Answer 3

Tuve un problema similar. Creo que el siguiente fragmento de código podría funcionar para usted:

...
<Route name="dashboard">
  <Route path="/" handler={availableRoutes.Dashboard}/>
  <Route name="dashboard-child" path="dashboard-child" handler={availableRoutes.DashboardChild}/>

  <DefaultRoute handler={availableRoutes.Dashboard}/>
</Route>
...