Вложенные маршруты в реактивном маршрутизаторе

Я устанавливаю некоторые вложенные маршруты в React-Router (v0.11.6 - это то, с чем я работаю), но всякий раз, когда я пытаюсь получить доступ к одному из вложенных маршрутов, он запускает родительский маршрут.

Мои маршруты выглядят так:

<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>

Если я скрою маршруты вверх, это выглядит так:

<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>

Он отлично работает. Причина, по которой я была вложенной, состояла в том, что у меня будет несколько дочерних элементов под "панелью", и они хотели, чтобы все они были префиксны с dashboard в URL-адресе.

Ответ 1

Конфигурация не касается маршрутизации (несмотря на имя), а больше о макетах, управляемых путями.

Итак, с этой конфигурацией:

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

Говорят, что dashboard-child следует вставлять внутрь dashboard. Как это работает, если dashboard имеет что-то вроде этого:

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

и dashboard-child имеет:

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

Тогда для пути dashboard нет встроенного дочернего элемента из-за отсутствия пути сопоставления, в результате чего:

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

И для пути dashboard/dashboard-child встроенный ребенок имеет путь соответствия, в результате чего:

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

Ответ 2

Здесь обновление для ответа @bjfletcher для response-router 1.0.0. Как указано в руководстве по обновлению:

RouteHandler отсутствует. Router теперь автоматически заполняет this.props.children ваших компонентов на основе активного маршрута.

Итак, вместо

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

вы бы использовали:

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

Ответ 3

У меня была аналогичная проблема. Я думаю, что следующий фрагмент может работать для вас:

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

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