React Hooks调用顺序错误及跨域Token传递问题求助

直接操作window.history会打破React Hooks的调用顺序规则，改用react-router-dom的路由API可以彻底解决这个问题，同时更贴合React生态的路由管理逻辑。

步骤1：基础配置与路由结构 #

首先确保已安装react-router-dom，然后在入口文件（如main.jsx）中配置路由容器：

import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import AuthHandler from './components/AuthHandler';

function App() {
  return (
    <Router>
      <Routes>
        {/* 初始带token的路径，专门处理授权逻辑 */}
        <Route path="/" element={<AuthHandler />} />
        {/* 目标页面 */}
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Router>
  );
}

这里用HashRouter匹配你需求中的#dashboard格式，若想用普通路径可替换为BrowserRouter。

步骤2：授权逻辑组件（处理token与路由跳转） #

创建AuthHandler组件，集中处理token解析、Redux存储和路由跳转，全程使用react-router-dom提供的Hook：

import { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { decode } from 'use-jwt';
import { setUserInfo } from '../redux/slices/userSlice';

function AuthHandler() {
  const navigate = useNavigate();
  // 安全获取URL查询参数
  const [searchParams] = useSearchParams();
  const dispatch = useDispatch();

  useEffect(() => {
    const token = searchParams.get('token');
    if (token) {
      // 解码token
      const decodedData = decode(token);
      // 将数据存入Redux
      dispatch(setUserInfo(decodedData));
      // 替换当前历史记录，跳转到目标页面
      navigate('/dashboard', { replace: true });
    } else {
      // 无token时的兜底处理（如跳登录页）
      navigate('/login');
    }
  }, [searchParams, navigate, dispatch]);

  return <div>授权处理中...</div>;
}

export default AuthHandler;

为什么这样能解决问题？ #

• 用useSearchParams替代直接读取window.location.search，完全遵循React Router的状态管理机制，不会触发Hooks顺序错误。
• 用useNavigate替代window.history操作，React Router会自动同步路由状态与组件生命周期，避免手动操作DOM历史栈导致的冲突。
• 将授权逻辑隔离到单独组件，职责更清晰，也避免在业务组件中混合路由操作引发的副作用问题。

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