Remix V2路由：实现嵌套父路由不可访问并自动跳转至子路由

针对你遇到的/user/edit路由需自动跳转的需求，这里提供两种直接可行的实现方式：

方法一：服务端重定向（推荐） #

在app/routes/user_.edit/route.tsx的loader函数中返回重定向响应，用户访问/user/edit时会直接跳转到目标子路由，这是效率最高的方式：

import { redirect } from "@remix-run/node";

// 服务端直接重定向
export async function loader() {
  return redirect("/user/edit/one");
}

// 若该路由有公共布局逻辑，可保留组件代码；若无则返回null即可
export default function UserEditLayout() {
  return null;
}

这种方式会让浏览器地址栏直接更新为目标URL，完全符合你不让用户访问父路由的需求，且不会影响子路由的数据加载。

方法二：客户端跳转（可选） #

如果需要在客户端层面处理跳转（比如特殊场景下的交互需求），可以在父路由组件中使用useNavigate实现：

import { useEffect } from "react";
import { useNavigate } from "@remix-run/react";

export default function UserEditLayout() {
  const navigate = useNavigate();

  useEffect(() => {
    // 使用replace避免在历史记录中留下原路由痕迹
    navigate("/user/edit/one", { replace: true });
  }, [navigate]);

  return null;
}

你的现有路由结构无需调整，两种方式都能保持/user与编辑页面的UI独立，同时满足URL结构要求。

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