React Router嵌套路由跳转失效：/app跳转至/app/user无响应

你遇到的核心问题是父路由对应的<Main />组件未渲染React Router的<Outlet />组件。

React Router的嵌套路由机制要求：父路由的组件必须通过<Outlet />来作为子路由内容的挂载容器。当你点击跳转到/app/user路径时，路由匹配逻辑其实已经触发，但由于<Main />里没有<Outlet />，子路由的<User />组件没有渲染入口，所以视觉上看起来导航没有生效。

非嵌套路由场景不需要依赖<Outlet />承载内容，因此功能正常；但嵌套路由下，父路由组件必须包含这个出口组件，子路由才能正常渲染展示。

修复方案 #

在<Main />组件中引入并添加<Outlet />：

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

function Main() {
  return (
    <div>
      <h1>主页面</h1>
      <Link to="user123">跳转到用户页</Link>
      {/* 子路由的内容将渲染在此处 */}
      <Outlet />
    </div>
  );
}

另外补充：跳转的Link路径可以使用相对路径（如to="user123"）或绝对路径（如to="/app/user123"），相对路径更适配嵌套路由的结构。

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