Детский маршрут не загружает компонент
Я пытаюсь создать конфигурацию маршрутизатора, используя createBrowserRouter.
Что-то вроде ниже:
export const router = createBrowserRouter([
{
path: '/',
element: <Root />,
errorElement: <ErrorPage />,
children: [
{
path: '/',
element: <Home />,
},
{
path: '/templates',
element: (
<Templates />
),
children: [
{
path: 'template-history/:templateId', // Define template-history and templateId as parameters
element: <Reports />,
},
],
},
],
},
]);
Мне нужно создать детей по шаблону. Например, URL будет "http:localhost:3000/template/template-history/123".
проблема в том, что если я попробую указанный выше URL-адрес, он перенаправится на http:localhost:3000/
Просто добавьте дочерние маршруты в "/templates", как вы это сделали для "/", то есть в корень. Или проблема в том, что Template отображает дочерние маршруты? Пожалуйста, отредактируйте , чтобы уточнить, в чем проблема. Включите полный минимально воспроизводимый пример, если есть более подходящий код, с которым вы работаете.
Да пробовал добавлять детей по шаблонам. Я пытался вызвать URL таким образом: http:localhost:3000/template/template-history/1234. если попытаться получить доступ к этому URL-адресу, он перенаправит меня на localhost:3000, корневой путь
Я отредактировал вопрос, указав точный код, который есть в моем проекте.
Маршрута "/template" нет, поэтому "/template/template-history/1234" не будет сопоставлен. Однако существует маршрут "/templates" с "s", поэтому "/templates/template-history/1234" можно сопоставить. Это просто опечатка в коде маршрутизации или в сообщении?
Комментарии @DrewReese, это просто опечатка
Можете ли вы поделиться этим Templates компонентом? Предоставляет ли он Выход для вложенных маршрутов для отображения их содержимого?
Давайте продолжим обсуждение в чате.
http:localhost:3000/templates/template-history/123, в этом случае компонент шаблонов, расположенный ниже этого компонента templatehistory, загружается в пользовательский интерфейс.
Ответы 1
Проблема после рендеринга Outlet:
"localhost:3000/templates/template-histoty/1"этот URL загружает оба шаблоны и компонент истории шаблонов в пользовательском интерфейсе вместе.
Вот как маршруты макета работают с Outlet и их вложенными маршрутами. Если вы хотите, чтобы Templates и Reports отображались независимо, вам нужно сделать для них одноуровневые маршруты.
Примеры:
export const router = createBrowserRouter([
{
element: <Root />,
errorElement: <ErrorPage />,
children: [
{ path: '/', element: <Home /> },
{
path: 'templates',
children: [
{
index: true,
element: <Templates />,
},
{
path: 'template-history/:templateId',
element: <Reports />,
},
],
},
],
},
]);
export const router = createBrowserRouter([
{
path: '/',
element: <Root />,
errorElement: <ErrorPage />,
children: [
{ path: '/', element: <Home /> },
{
path: 'templates',
element: <Templates />,
},
{
path: 'templates/template-history/:templateId',
element: <Reports />,
},
],
},
]);
Вы пробовали свойство
children? actrouter.com/en/6.22.2/routers/create-browser-router#routes