刷新任意页面均重定向至首页的React SPA问题求助

刷新页面时任意页面都会重定向到首页，核心原因有两个：

1. AuthContext 初始化未读取本地存储：当前AuthContextProvider的token和userId初始值为undefined，App组件第一次渲染时会判定用户未认证，先渲染未认证路由（触发到/sign-in的重定向）；后续useEffect读取localStorage并更新token后，App重新渲染已认证路由，但此时路径已被改成/sign-in，最终被兜底的Redirect跳转到/home。
2. 兜底重定向逻辑过于绝对：已认证路由的Switch最后用<Redirect to="/home" />作为兜底，导致任何未匹配到定义路径的请求都会跳转到首页，包括刷新时因初始路由切换导致的异常路径。

1. 移到AuthContextProvider中初始化本地存储数据 #

修改authContext.js，在组件挂载时直接读取localStorage初始化state，避免初始渲染时token为空：

export const AuthContext = createContext({
  token: null,
  userId: null,
  isLoggedIn: false,
  login: (userId, token) => {},
  logout: () => {},
});

const AuthContextProvider = (props) => {
  // 初始化时直接从localStorage读取数据
  const [userId, setUserId] = useState(() => {
    const storedData = JSON.parse(localStorage.getItem("userData"));
    return storedData?.userId;
  });
  const [token, setToken] = useState(() => {
    const storedData = JSON.parse(localStorage.getItem("userData"));
    return storedData?.token;
  });

  const loginUserHandler = useCallback((userId, token) => {
    setUserId(userId);
    setToken(token);
    localStorage.setItem("userData", JSON.stringify({ userId, token }));
  }, []);

  const logoutUserHandler = useCallback(() => {
    setUserId(null);
    setToken(null);
    localStorage.removeItem("userData");
  }, []);

  const contextValue = {
    userId: userId,
    token: token,
    isLoggedIn: !!token,
    login: loginUserHandler,
    logout: logoutUserHandler,
  };

  return <AuthContext.Provider value={contextValue}>{props.children}</AuthContext.Provider>;
};

export default AuthContextProvider;

2. 优化App组件的路由逻辑 #

• 用路由守卫组件控制访问权限，避免初始渲染时的错误重定向
• 保留用户刷新前的路径，避免不必要的跳转

修改app.js：

import { Route, Switch, Redirect, BrowserRouter } from 'react-router-dom';

// 仅允许已认证用户访问的路由守卫
const ProtectedRoute = ({ children, ...rest }) => {
  const { token } = useContext(AuthContext);
  return (
    <Route
      {...rest}
      render={({ location }) =>
        token ? (
          children
        ) : (
          <Redirect to={{ pathname: "/sign-in", state: { from: location } }} />
        )
      }
    />
  );
};

// 仅允许未认证用户访问的路由守卫
const PublicRoute = ({ children, ...rest }) => {
  const { token } = useContext(AuthContext);
  return (
    <Route
      {...rest}
      render={({ location }) =>
        !token ? (
          children
        ) : (
          <Redirect to={{ pathname: "/home", state: { from: location } }} />
        )
      }
    />
  );
};

function App() {
  const { token } = useContext(AuthContext);

  return (
    <BrowserRouter>
      <Switch>
        {/* 未认证路由 */}
        <PublicRoute path="/sign-in" exact>
          <Login />
        </PublicRoute>

        {/* 已认证路由 */}
        <ProtectedRoute path="/home" exact>
          <Layout>
            <Home />
          </Layout>
        </ProtectedRoute>
        <ProtectedRoute path="/leads-manager" exact>
          <Layout>
            <Leads />
          </Layout>
        </ProtectedRoute>
        <ProtectedRoute path="/phone-manager" exact>
          <Layout>
            <Phone />
          </Layout>
        </ProtectedRoute>
        <ProtectedRoute path="/new-notifications" exact>
          <Layout>
            <Notification />
          </Layout>
        </ProtectedRoute>

        {/* 兜底逻辑：根据认证状态跳转 */}
        {token ? <Redirect to="/home" /> : <Redirect to="/sign-in" />}
      </Switch>
    </BrowserRouter>
  );
}

export default App;

3. 可选：添加加载状态（避免路由闪烁） #

如果需要校验token有效性（比如发起异步请求验证），可以在AuthContext中添加加载状态，避免页面闪烁：

在authContext.js中添加isLoading状态：

const AuthContextProvider = (props) => {
  const [userId, setUserId] = useState();
  const [token, setToken] = useState();
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const storedData = JSON.parse(localStorage.getItem("userData"));
    if (storedData && storedData.token) {
      // 可选：这里可以添加token有效性校验请求
      setUserId(storedData.userId);
      setToken(storedData.token);
    }
    setIsLoading(false);
  }, []);

  // 其他逻辑不变

  const contextValue = {
    userId: userId,
    token: token,
    isLoggedIn: !!token,
    isLoading: isLoading,
    login: loginUserHandler,
    logout: logoutUserHandler,
  };

  return <AuthContext.Provider value={contextValue}>{props.children}</AuthContext.Provider>;
};

在app.js中添加加载状态判断：

function App() {
  const { token, isLoading } = useContext(AuthContext);

  if (isLoading) {
    return <div>加载中...</div>; // 替换为你的自定义加载组件
  }

  // 路由逻辑不变
}

• 将本地存储初始化移到AuthContext的state初始化函数中，确保组件挂载时直接拿到token，避免初始渲染时的未认证状态。
• 路由守卫组件可以精准控制路由访问权限，同时通过state.from保留用户原始路径，刷新时会回到之前的页面。
• 兜底重定向仅在没有匹配到任何路由时触发，避免正常路径被强制跳转到首页。

内容的提问来源于stack exchange，提问作者J.Tran