React+Redux适配react-router-dom v6：useNavigate使用报错解决

问题根源 #

useNavigate 是React Hook，必须严格遵循Hook规则：只能在React函数组件的顶层或自定义Hook的顶层调用，因此无法直接在Redux action、工具类这类非组件/非自定义Hook文件中直接调用。

方案一：组件层传递导航函数到Redux action #

这种方式最符合React和Hook的设计原则，将导航逻辑留在组件层，仅把导航函数作为参数传递给action。

1. 在登录/注册组件中调用useNavigate，获取导航函数
2. 触发Redux action时，将导航函数作为参数传入
3. 在action中完成异步逻辑（比如请求登录接口）后，调用传入的导航函数跳转

示例代码：

// LoginComponent.jsx
import { useNavigate } from 'react-router-dom';
import { login } from '../_actions/user.actions';
import { useDispatch } from 'react-redux';

const LoginComponent = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const handleLogin = async (credentials) => {
    // 将navigate作为参数传给action
    await dispatch(login(credentials, navigate));
  };

  // 组件渲染逻辑...
};

// user.actions.js
export const login = (credentials, navigate) => async (dispatch) => {
  try {
    // 执行登录请求逻辑
    const response = await api.login(credentials);
    dispatch({ type: 'LOGIN_SUCCESS', payload: response.data });
    // 登录成功后跳转
    navigate('/dashboard');
  } catch (error) {
    dispatch({ type: 'LOGIN_FAILURE', payload: error.message });
  }
};

方案二：创建全局可访问的导航工具类 #

通过React上下文和ref，将useNavigate的实例存储起来，供非组件文件调用。

1. 创建导航工具文件（比如navigation.js）

// navigation.js
import { useNavigate, createRef } from 'react';

// 创建ref存储navigate函数
const navigateRef = createRef();

// 自定义Hook：在组件中调用，初始化navigateRef
export const useSetupNavigation = () => {
  const navigate = useNavigate();
  navigateRef.current = navigate;
};

// 导出全局可用的导航函数
export const navigateTo = (path, options) => {
  if (navigateRef.current) {
    navigateRef.current(path, options);
  } else {
    console.error('导航函数未初始化，请确保已在App组件中调用useSetupNavigation');
  }
};

2. 在App组件中初始化导航工具

// App.jsx
import { Routes, Route } from 'react-router-dom';
import { useSetupNavigation } from './navigation';

const App = () => {
  // 初始化导航ref，必须在组件顶层调用
  useSetupNavigation();

  return (
    <Routes>
      {/* 路由配置... */}
    </Routes>
  );
};

3. 在Redux action中直接调用全局导航函数

// user.actions.js
import { navigateTo } from '../navigation';

export const login = (credentials) => async (dispatch) => {
  try {
    const response = await api.login(credentials);
    dispatch({ type: 'LOGIN_SUCCESS', payload: response.data });
    // 使用全局导航函数跳转
    navigateTo('/dashboard');
  } catch (error) {
    dispatch({ type: 'LOGIN_FAILURE', payload: error.message });
  }
};

注意：必须确保useSetupNavigation在App组件中被调用，且App组件被BrowserRouter包裹，否则navigateRef.current会为空。

方案三：使用不稳定的unstable_HistoryRouter（不推荐） #

如果想继续沿用原有的createBrowserHistory方式，可以使用React Router v6提供的unstable_HistoryRouter（标记为不稳定API，未来可能被移除或修改）。

1. 创建history对象

// _helpers/history.ts
import { createBrowserHistory } from 'history';
export const history = createBrowserHistory();

2. 在App组件中替换BrowserRouter为unstable_HistoryRouter

// App.jsx
import { unstable_HistoryRouter as HistoryRouter, Routes, Route } from 'react-router-dom';
import { history } from './_helpers/history';

const App = () => {
  return (
    <HistoryRouter history={history}>
      <Routes>
        {/* 路由配置... */}
      </Routes>
    </HistoryRouter>
  );
};

3. 继续在Redux action中使用原有的history对象

// user.actions.js
import { history } from '../_helpers/history';

export const login = (credentials) => async (dispatch) => {
  try {
    const response = await api.login(credentials);
    dispatch({ type: 'LOGIN_SUCCESS', payload: response.data });
    history.push('/dashboard');
  } catch (error) {
    dispatch({ type: 'LOGIN_FAILURE', payload: error.message });
  }
};

注意：该API标记为不稳定，不建议在生产环境使用，未来版本可能会有破坏性变更。

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