React Router父路由Loader重定向子路由引发无限循环问题及解决方案咨询

问题重现与代码 #

你当前的路由代码如下：

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      path="/"
      element={<Home />}
      loader={async () => {
        const s = localStorage.getItem('s');
        console.error(s);
        if (s) {
          return redirect('user');
        }
        return null;
      }}
    >
      <Route path="user" element={<div>1</div>} />
    </Route>
  )
);

你遇到的问题是：触发重定向后出现了无限循环，父路由的loader方法被反复调用，完全停不下来。

问题原因分析 #

这其实是React Router的路由机制特性导致的：当你重定向到/user时，/user是父路由/的子路由，子路由的渲染必然会触发父路由的loader重新执行。这时候父路由的loader又检测到localStorage里的s存在，再次触发重定向到/user，如此往复就形成了无限循环。

简单梳理下循环链路：访问/ → 触发父路由loader → 重定向到/user → 加载/user时必须加载父路由/的资源（包括执行loader） → 再次触发重定向 → 循环往复。

解决方案 #

这里有几种可行的解决思路，你可以根据自己的业务需求选择：

1. 在父路由loader中判断当前路径，避免重复重定向

这是最贴合你原有路由结构的方案，在loader里通过request参数获取当前访问的路径，如果已经是/user就不再触发重定向：

loader={async ({ request }) => {
  const s = localStorage.getItem('s');
  console.error(s);
  if (s) {
    // 解析当前访问的路径
    const currentPath = new URL(request.url).pathname;
    // 只有当前路径不是/user时才执行重定向
    if (currentPath !== '/user') {
      return redirect('/user');
    }
  }
  return null;
}}

2. 调整路由结构，拆分父路由与子路由为同级

如果你的Home组件不需要在/user路由下渲染，可以把根路由和user路由改成同级结构，这样访问/user时就不会触发根路由的loader了：

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route
        path="/"
        element={<Home />}
        loader={async () => {
          const s = localStorage.getItem('s');
          console.error(s);
          if (s) {
            return redirect('/user');
          }
          return null;
        }}
      />
      <Route path="/user" element={<div>1</div>} />
    </>
  )
);

3. 在组件层面用useEffect处理重定向（不推荐，仅作备选）

如果不想用loader的方式，也可以在Home组件里结合useNavigate和useEffect处理，但这种方式不如loader优雅——因为loader是在组件渲染前执行的，不会出现组件闪烁的情况：

function Home() {
  const navigate = useNavigate();
  useEffect(() => {
    const s = localStorage.getItem('s');
    if (s) {
      navigate('/user');
    }
  }, [navigate]);
  
  return <div>Home</div>;
}

总结 #

最推荐第一种方案，既保留了你原有的嵌套路由结构，又通过简单的路径判断避免了无限循环，完全符合React Router的loader最佳实践。

备注：内容来源于stack exchange，提问作者Denis