子路由未加载组件

Question

我正在尝试使用

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"

.

问题是如果我尝试上面的网址，它会重定向到 http:localhost:3000/

Answer 1

Outlet渲染后的问题是

"localhost:3000/templates/template-histoty/1"

此网址正在加载两者 UI 中的模板和模板历史组件一起。

这就是布局路线与

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 />,
      },
    ],
  },
]);