Дочерние маршруты с реакции-маршрутизатор-конфигурации - PullRequest
Новая
       7

Дочерние маршруты с реакции-маршрутизатор-конфигурации

0 голосов
/ 08 февраля 2020

Я работаю над React SSR с дочерними маршрутами, но все дочерние маршруты отображаются на одной странице.

Например: 

export const routes = [
  // Some sibling routes go here and since this is nested with <Switch>, those are working fine.
  {
    path: '/user/:id',
    component: Userpage,
    routes: [
      {
        path: '/user/:id/profile',
        component: Profilepage,
      },
      {
        path: '/user/:id/posts',
        component: Postspage,
        routes: [
          {
            path: '/user/:id/posts/:id',
            component: Postpage,
            routes: [
              {
                path: '/user/:id/posts/:id/edit',
                component: Posteditpage,
              },
            ],
          },
        ],
      },
    ],
  },
  {
    component: Notfoundpage,
  },
];

const App = () => {
  return (
    <Switch>
      { renderRoutes(routes, initialData) }
    </Switch>
  );
};

Использование этого шаблон для печати страницы: 

import React from 'react';
import { renderRoutes } from 'react-router-config';

const Userpage = ({ route }) => {
  const { routes } = route;
  return (
    <div>
      <h1>
        This is the user page
      </h1>
      { renderRoutes(routes) }
    </div>
  );
};

export default Userpage;

Отображает это на этом маршруте, http://localhost:3000/user/me/posts/firstpost/edit:

Это страница пользователя

Это страница постов

Показать все сообщения здесь

Это сообщение

Показать только одно сообщение здесь

Это сообщениеit

Редактировать сообщение здесь

Как сделать так, чтобы он отображал отдельные страницы, нужно ли мне указывать все маршруты как родные? Это не кажется правильным, хотя.

1 Ответ

0 голосов
/ 09 февраля 2020

Если вы не хотите отображать макет родительского маршрута вместе с дочерним, то вы должны поместить свой дочерний маршрут на тот же уровень, что и родительский. Фрагмент, демонстрирующий поведение дочернего маршрута https://stackblitz.com/edit/react-router-config

const routes = [
  {
    component: Root,
    routes: [
      {
        path: '/',
        exact: true,
        component: Home
      },
      { // moved it from 'Child.routes' to the root level
        path: '/child/:id/grand-child',
        component: GrandChild
      },
      {
        path: '/child/:id',
        component: Child,
      }
    ]
  }
]
...