createBrowserRouter 如何将子路由嵌套在另一个本身是嵌套子路由的路由中？

Question

我是 React router 的新手，我按照最新版本 6.4.3 的教程进行操作，并使用 createBrowserRouter。

对于下面的应用程序组件，我尝试将子对象添加到索引路径，但是当我这样做时，应用程序不会突然呈现。我在其他路径上尝试过此操作，得到相同的结果。不太确定该怎么做，请帮忙！

App.js代码如下：

import logo from './logo.svg';
import './App.css';
import './index.css';

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Root from './routes/Root';
import Home from './routes/Home';
import Projects from './routes/Projects';
import ErrorPage from './error/ErrorPage';
import Contact from './routes/Contact';
import Certificates from './routes/Certificates';
import Skills from './routes/Skills';
import Cycling from './routes/HobbyRoutes/Cycling';
import Minis from './routes/HobbyRoutes/Minis';
import Chivalry from './routes/HobbyRoutes/Chivalry';
//import NavBar from '../src/NavBar/NavBar';

const router = createBrowserRouter([
    {
        path: '/',
        element: <Root />,
        errorElement: <ErrorPage />,
        children: [
            {
                index: true,
                element: <Home />,
                children: [
                    {
                        path: '/home/minis',
                        element: <Minis/>
                    }
                ]
            },
            {
                path: '/projects',
                element: <Projects />,
                errorElement: <ErrorPage />,
            },
            {
                path: '/certificates',
                element: <Certificates />,
            },
            {
                path: '/skills',
                element: <Skills />,
            },
            {
                path: '/contact',
                element: <Contact />,
            },
        ],
    },
]);


function App() {
  return <RouterProvider router={router} />;
}

export default App;

对于下面的应用程序组件，我尝试将子对象添加到索引路径，但是当我这样做时，页面不会突然呈现。

期望是页面呈现。

Answer 1

将 <Outlet /> 添加到父路由的 render 方法中。

父路由元素中应使用 <Outlet> 来呈现其子路由元素。这允许在渲染子路由时显示嵌套的 UI。如果父路由完全匹配，则将渲染子索引路由；如果没有索引路由，则不渲染任何内容。

了解更多： https: //reactrouter.com/en/main/components/outlet