React Router Dom v6.17.0中redirect重定向失效问题求助

你当前的代码问题在于：redirect()函数不能在普通函数中直接调用生效，它是React Router为路由loader/action函数设计的API，只有当这个函数的返回值被路由系统接收时，才会触发重定向。

下面给你两种可行的解决方式：

方案一：使用路由Loader做权限校验（官方推荐） #

将权限校验逻辑放到路由的loader函数中，路由加载时会自动处理重定向：

import { createBrowserRouter, RouterProvider, redirect } from "react-router-dom";
import LoginPage from "./LoginPage";
import ProtectedPage from "./ProtectedPage";

const router = createBrowserRouter([
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    path: "/protected", // 需要保护的路由
    element: <ProtectedPage />,
    loader: () => {
      const isLoggedIn = localStorage.getItem("isLoggedIn");
      if (!isLoggedIn) {
        // 携带提示参数重定向到登录页
        return redirect("/login?message=Please login first");
      }
      return null;
    },
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

方案二：封装组件级权限校验 #

如果需要在组件层面控制权限，可以写一个ProtectedRoute组件，用<Navigate>实现重定向：

import { Navigate } from "react-router-dom";

export function ProtectedRoute({ children }) {
  const isLoggedIn = localStorage.getItem("isLoggedIn");

  if (!isLoggedIn) {
    return <Navigate to="/login?message=Please login first" replace />;
  }

  return children;
}

然后在路由配置中使用这个组件包裹需要保护的页面：

// 路由配置示例
<Route path="/protected" element={
  <ProtectedRoute>
    <ProtectedPage />
  </ProtectedRoute>
} />

为什么原代码不生效？ #

redirect()本质是创建了一个重定向指令对象，但这个对象必须被React Router的路由系统（比如loader/action的返回值）处理才能触发页面跳转。你在普通函数里调用它却没有把结果返回给路由系统，所以不会有任何效果。

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