React Router路径变化但组件不渲染问题求助

核心问题 #

你的路由结构中，Auth作为父路由组件，但未添加<Outlet />来承载子路由内容。React Router里嵌套路由的子组件必须通过父组件中的<Outlet />才能渲染，否则即便地址栏路径变化，目标组件也不会显示。

修复步骤 #

1. 在Auth组件中导入并添加Outlet
   从react-router-dom导入Outlet组件，在Auth的JSX中放置该组件，子路由内容会自动渲染到这个位置。

2. 移除冗余的navigate调用（可选但推荐）
   <Link>的to属性已经能完成路由跳转，无需额外在onClick中调用navigate，重复操作可能引发不必要的行为。

修改后的代码示例 #

Auth.jsx

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

const Auth = () => {
  return (
    <div>
      <div className="flex flex-row gap-3">
        <Link
          to="/succesLogIn"
          className="w-24 font-bold p-3 rounded-xl text-white text-xl
            hover:-translate-y-1 bg-slate-500 active:bg-slate-600 transition"
        >
          LogIn
        </Link>
        <Link
          to="/register"
          className="w-24 font-bold  p-3 rounded-xl text-white text-xl hover:-translate-y-1 bg-slate-500 active:bg-slate-600 transition"
        >
          Register
        </Link>
      </div>
      {/* 子路由组件将渲染在此处 */}
      <Outlet />
    </div>
  );
};

export default Auth;

可选优化：路由路径写法规范

父路由已指定path="/"，子路由路径可省略开头斜杠，写成相对路径，更符合React Router嵌套路由设计：

// App.jsx
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Auth />}>
      <Route path="succesLogIn" element={<SuccesLogIn />}></Route>
      <Route path="register" element={<Register />}></Route>
    </Route>
  )
);

原理说明 #

<Outlet />是React Router提供的占位组件，专门用于渲染嵌套路由的子组件。当点击<Link>跳转到子路由时，React Router会匹配对应的子路由组件，并将其挂载到父组件的<Outlet />位置。缺少这个占位符，子组件就没有挂载入口，自然无法显示。

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