React-router-dom 6^4路由URL拼接正常但组件不渲染问题求助

你的核心问题是父路由对应的App组件中缺少<Outlet />组件——React Router v6+中，子路由的元素必须通过<Outlet />作为占位容器来渲染，否则子组件没有挂载的位置。

具体修复步骤： #

1. 在App组件中导入Outlet：

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

2. 在App组件的JSX中，添加<Outlet />作为子路由组件的渲染位置，比如放在跳转链接下方：

function App() {
  return (
    <div>
      <Link to="sign_up">Sign Up</Link>
      <Link to="log_in">Log In</Link>
      {/* 子路由组件会渲染在此处 */}
      <Outlet />
    </div>
  );
}

3. 确认路由配置中children数组正确嵌套在根路由对象内（你的现有代码片段逻辑正确，完整配置示例如下）：

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "sign_up",
        element: <SignUp />
      },
      {
        path: "log_in",
        element: <LogIn />
      }
    ]
  }
]);

完成以上修改后，点击Sign Up或Log In链接，对应的子组件就会渲染在<Outlet />指定的位置。

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