React Router中useNavigate的navigate(-1)跳转异常求助

你的问题核心是路由历史栈被不必要的重定向操作污染，导致navigate(-1)无法稳定回退到上一页。结合代码分析，主要触发原因如下：

• PrivateRoute/PublicRoute在session状态未稳定时（比如Redux初始化、session校验阶段），会触发无效重定向，向历史栈中插入额外记录。
• 根路由（/）和通配符路由（*）的重定向逻辑，会在session状态变化时重复执行，打乱历史栈结构。

以下是针对性修复方案：

1. 修复私有/公共路由的加载状态处理 #

当前路由组件在session为undefined时直接跳转登录页，但session从Redux获取存在异步过程，会导致页面短暂跳转后回退，污染历史栈。修改组件增加加载状态判断：

// ======= private route ======= //
const PrivateRoute: FC<RouteI> = ({ element: Element, session, hasSidebar }) => {
  // session未加载完成时显示加载态，避免提前重定向
  if (session === undefined) {
    return <LinearProgress />;
  }

  return session ? (
    <Suspense fallback={<LinearProgress />}>
      <SidebarGrid element={Element} hasSidebar={hasSidebar} />
    </Suspense>
  ) : (
    <Navigate to={APP_PATH.SIGN_IN} replace /> {/* 用replace避免添加无效历史记录 */}
  );
};

// ======= public route ======= //
const PublicRoute: FC<RouteI> = ({ element: Element, session }) => {
  if (session === undefined) {
    return <LinearProgress />;
  }

  return (
    <Suspense fallback={<LinearProgress />}>
      {session ? <Navigate to={APP_PATH.USERS} replace /> : <Element />}
    </Suspense>
  );
};

2. 优化根路由与通配符路由的重定向逻辑 #

原默认路由的<Navigate>会在session变化时重复触发，改用useEffect仅在首次加载或路径无效时执行重定向：

const AppRoutes = () => {
  const session = useSelector(userSessionSelector);
  const navigate = useNavigate();
  
  const {
    SIGN_IN,
    PRODUCTS,
    PRODUCT_CREATE,
    PRODUCT_DETAILS,
    PRODUCT_EDIT,
    PRODUCTS_TYPES,
    USERS,
    USER_DETAILS,
    RESET_PASSWORD,
    PROFILE,
    ORDERS,
    ADMINISTRATION,
    SUBSCRIPTIONS
  } = APP_PATH;

  useEffect(() => {
    if (session === undefined) return;

    // 仅在当前路径为根路径或无效路径时执行重定向
    const currentPath = window.location.pathname;
    const validPaths = Object.values(APP_PATH);
    if (currentPath === '/' || !validPaths.includes(currentPath)) {
      navigate(session ? USERS : SIGN_IN, { replace: true });
    }

    RequestNotificationPermissions();
  }, [session, navigate]);

  return (
    <Routes>
      {/* PRIVATE */}
      <Route path={PRODUCTS} element={<PrivateRoute session={session} element={ProductsPage} hasSidebar />} />
      <Route path={PRODUCT_CREATE} element={<PrivateRoute session={session} element={ProductCreatePage} hasSidebar />} />
      <Route path={PRODUCT_DETAILS} element={<PrivateRoute session={session} element={ProductDetailsPage} hasSidebar />} />
      <Route path={PRODUCT_EDIT} element={<PrivateRoute session={session} element={ProductEditPage} hasSidebar />} />
      <Route path={PRODUCTS_TYPES} element={<PrivateRoute session={session} element={ProductTypesPage} hasSidebar />} />
      <Route path={USERS} element={<PrivateRoute session={session} element={UsersPage} hasSidebar />} />
      <Route path={USER_DETAILS} element={<PrivateRoute session={session} element={UserDetailsPage} hasSidebar />} />
      <Route path={PROFILE} element={<PrivateRoute session={session} element={ProfilePage} hasSidebar />} />
      <Route path={ORDERS} element={<PrivateRoute session={session} element={OrdersPage} hasSidebar />} />
      <Route path={ADMINISTRATION} element={<PrivateRoute session={session} element={AdministrationPage} hasSidebar />} />
      <Route path={SUBSCRIPTIONS} element={<PrivateRoute session={session} element={SubscriptionsPage} hasSidebar />} />

      {/* PUBLIC */}
      <Route path={SIGN_IN} element={<PublicRoute session={session} element={SignInPage} />} />
      <Route path={RESET_PASSWORD} element={<PublicRoute session={session} element={ResetPasswordPage} />} />
    </Routes>
  );
};

3. 标准化导航到创建页的逻辑 #

从/products跳转到/products/create时使用普通push即可，无需replace（除非你刻意不想保留/products的历史记录）：

// 在ProductsPage组件中
const navigate = useNavigate();
const handleGoToCreate = () => {
  navigate(APP_PATH.PRODUCT_CREATE);
};

4. 明确Redux中session的初始化状态 #

确保Redux中userSession的初始值为null而非undefined，清晰区分“未加载”和“未登录”状态：

// 示例Redux初始状态
const initialState = {
  session: null, // 用null代替undefined
  // 其他状态...
};

补充说明 #

你之前尝试的{ replace: true }无效，是因为问题根源不是跳转方式，而是历史栈已经被多余的重定向记录污染。修复后，历史栈会保持清晰的跳转轨迹，navigate(-1)即可稳定回退到/products。

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