使用createBrowserRouter时React组件无法渲染的问题排查

你遇到的问题是嵌套路由的父组件没有提供子组件的渲染出口。在react-router-dom的嵌套路由机制中，子路由对应的组件需要父路由组件通过<Outlet />来指定渲染位置，否则即使路径匹配正确，子组件也没有地方挂载展示。

具体修复步骤： #

• 在Home组件中导入Outlet：

import { Outlet } from 'react-router-dom';

• 在Home组件的JSX中合适位置添加<Outlet />，示例如下：

function Home() {
  return (
    <div>
      <h1>首页内容</h1>
      {/* 子路由组件会渲染在这个位置 */}
      <Outlet />
    </div>
  );
}

export default Home;

完成上述修改后，访问/about时，Home组件会正常渲染，About组件会被插入到<Outlet />的位置，就能看到对应内容了。

另一种可选方案（无需嵌套路由时）： #

如果你本就不需要将About、Skills作为Home的子路由，可直接将它们配置为顶级路由：

const router = createBrowserRouter([
  {
    path:'/',
    element: <Home />,
  },
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/skills',
    element: <Skills />
  }
]);

这种配置下，访问/about会直接渲染About组件，无需依赖Home组件的Outlet。

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