react-router-dom v6 登录跳转首页与/signin路由访问拦截实现问题

问题根源 #

你的代码核心问题是路由重复定义，React Router v6的<Routes>组件会优先匹配第一个路径符合的路由规则：

1. 你提前定义了无访问限制的/signin和/路由，后续加的权限判断逻辑、PrivateRoute规则因为路径重复，永远不会被触发
2. 没有对登录页路由做登录状态校验，已登录用户访问/signin时自然不会触发重定向
3. PrivateRoute里的跳转路径用了相对路径to="signin"，可能出现路径拼接错误

修改步骤 #

1. 补充仅未登录可访问的路由封装 #

新增PublicOnlyRoute组件，用于限制登录后无法访问登录注册页这类公开页面，同时修正原有PrivateRoute的跳转路径：

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

// 仅未登录用户可访问的路由（登录注册页等）
const PublicOnlyRoute = ({ children, currentUser }) => {
  return currentUser ? <Navigate to="/" /> : children;
};

// 需要登录才可访问的路由
const PrivateRoute = ({ children, currentUser }) => {
  return currentUser ? children : <Navigate to="/signin" />;
};

export { PrivateRoute, PublicOnlyRoute };

2. 修正App.js路由配置 #

删除重复的路由定义，每个路由按访问权限对应包装：

render() {
  const { currentUser } = this.props;
  return (
    <div>
      <Header />
      <Routes>
        {/* 无权限限制的公开路由 */}
        <Route path="/shop" element={<ShopPage />} />
        {/* 仅未登录可访问的登录注册页 */}
        <Route path="/signin" element={
          <PublicOnlyRoute currentUser={currentUser}>
            <SignInAndSignUpPage />
          </PublicOnlyRoute>
        } />
        {/* 需要登录才可访问的首页 */}
        <Route path="/" element={
          <PrivateRoute currentUser={currentUser}>
            <HomePage />
          </PrivateRoute>
        } />
      </Routes>
    </div>
  );
}

效果说明 #

修改完成后即可实现需求：

• 未登录用户访问首页会自动重定向到登录页
• 已登录用户手动输入/signin路径会自动重定向到首页
• 登录成功后currentUser状态更新，登录页会自动触发重定向跳转至首页，无需额外写跳转逻辑

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