React Router DOM v6：在路由加载器中使用重定向时出现无限重定向循环

Question

我有一个简单的应用程序，使用来自

react-router-dom

的新 v6 API。我的应用程序路由定义如下：

import { Footer, Layout } from "@org/components-library";
import { Outlet, redirect, type RouteObject } from "react-router-dom";

import { AppNavbar } from "./AppNavbar";
import { NotFound } from "./pages/NotFound";
import { OnePager } from "./pages/OnePager";

const AppRoutes: RouteObject[] = [
  {
    path: "/",
    element: (
      <Layout navbar={<AppNavbar />} footer={<Footer />}>
        <Outlet />
      </Layout>
    ),
    children: [
      {
        path: "/one-pager",
        element: <OnePager />,
      },
      {
        path: "/",
        loader: () => redirect("/one-pager"),
      },
      {
        path: "*",
        element: <NotFound />,
      },
    ],
  },
];

export default AppRoutes;

希望这里的意图非常明确，但如果用户点击根路线

/

，那么他们应该被重定向到

/one-pager

。问题是，当我这样做时，我的应用程序不知何故进入了无限重定向循环，永远无法解决。由于某种原因，这种无限循环也仅在我将应用程序部署到 Kubernetes 集群时才会发生，而当我使用

pnpm start

运行时，它不会在本地开发中发生。我尝试过制作

loader

函数

async

来查看返回

Promise<Response>

是否会改变任何内容，但它不起作用。

好奇其他人是否遇到过这个问题？

Answer 1

所以你基本上想在用户转到“/”路线时重定向用户，对吧？，我认为使用加载程序来执行此操作不是一个好主意，我建议提供一个组件并使用 useEffect 和 useNavigate 来重定向用户