React Router createBrowserRouter子组件无法渲染求助

你的问题根源在于父路由组件中没有添加子路由的出口（Outlet）。在React Router v6+的createBrowserRouter配置中，嵌套路由的子组件需要通过<Outlet />来渲染，父组件必须包含这个组件，否则子路由的内容没有挂载位置，只会显示父组件里的Navbar和Alert。

解决步骤： #

1. 从react-router-dom导入Outlet组件
2. 在父路由的element对应的div中添加<Outlet />，放在合适的位置（比如Alert组件之后）

修改后的代码如下：

// 先导入Outlet
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";

const rou = createBrowserRouter([
  {
    path: "/",
    element: (
      <div>
        <Navbar
          title="TextUtils"
          mode={mode}
          toggleMode={toggleMode}
          btnText={btnText}
        />
        <Alert alert={alert} />
        {/* 添加Outlet，子路由的内容会在这里渲染 */}
        <Outlet />
      </div>
    ),
    children: [
      {
        index: true,
        element: (
          <div className="container my-3">
            <Textform
              showAlert={showAlert}
              heading="Enter the text to analyze"
              mode={mode}
            /> 
          </div>
        ), 
      },
      {
        path: '/about',
        element: (
          <div className="container my-3">
            <About />
          </div>
        ),
      },
    ]
  }
]);

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

修改后，访问根路径时会渲染Textform组件，访问/about时会渲染About组件，同时Navbar和Alert会保持在页面上。

内容的提问来源于stack exchange，提问作者Muskaan Chaturvedi