如何在Redux中配合React Router v6实现页面重定向？

方案1：通过Redux状态触发组件内导航（推荐，符合单向数据流） #

核心思路是让Redux仅存储导航意图状态，实际的导航操作交给React组件完成，避免在store中直接操作路由API，完全适配React Router 6的设计逻辑。

步骤：

• 在Redux中定义存储重定向路径的状态（如redirectTo），并添加设置、清空路径的action
• 在根组件或专门的监听组件中，用useSelector获取该状态，结合useNavigate实现导航，导航完成后清空状态

示例代码：

Redux reducer & action

// reducers/navigation.js
const initialState = {
  redirectTo: null
};

export default function navigationReducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_REDIRECT':
      return { ...state, redirectTo: action.payload };
    case 'CLEAR_REDIRECT':
      return { ...state, redirectTo: null };
    default:
      return state;
  }
}

// actions/navigation.js
export const setRedirect = (path) => ({
  type: 'SET_REDIRECT',
  payload: path
});

export const clearRedirect = () => ({
  type: 'CLEAR_REDIRECT'
});

导航监听组件

// components/RedirectListener.js
import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { clearRedirect } from '../actions/navigation';

export default function RedirectListener() {
  const redirectTo = useSelector(state => state.navigation.redirectTo);
  const dispatch = useDispatch();
  const navigate = useNavigate();

  useEffect(() => {
    if (redirectTo) {
      navigate(redirectTo);
      dispatch(clearRedirect());
    }
  }, [redirectTo, navigate, dispatch]);

  return null; // 无UI渲染，仅负责监听导航状态
}

将RedirectListener放在App组件的<Routes>之外即可，后续需要重定向时，只需在异步action或逻辑中dispatchsetRedirect('/目标路径')。

方案2：自定义导航服务（适合复杂异步场景） #

如果项目中有大量需要在Redux异步逻辑（如thunk、saga）中触发导航的场景，可以封装全局导航服务，在组件初始化时注入navigate方法，之后在Redux逻辑中直接调用。

示例代码：

导航服务封装

// services/navigateService.js
let navigateInstance = null;

export const setNavigate = (navigate) => {
  navigateInstance = navigate;
};

export const navigateTo = (path) => {
  if (navigateInstance) {
    navigateInstance(path);
  } else {
    console.error('导航实例未初始化，请确保在React组件中调用setNavigate');
  }
};

根组件初始化服务

// App.js
import { useNavigate } from 'react-router-dom';
import { setNavigate } from './services/navigateService';
import RedirectListener from './components/RedirectListener';

function App() {
  const navigate = useNavigate();
  setNavigate(navigate); // 注入React Router的navigate实例

  return (
    <>
      <RedirectListener />
      <Routes>
        {/* 你的路由配置 */}
      </Routes>
    </>
  );
}

在Redux thunk中使用

// actions/dataActions.js
import { navigateTo } from '../services/navigateService';

export const fetchUserData = () => async (dispatch) => {
  try {
    const res = await api.getUserInfo();
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: res.data });
    navigateTo('/user/profile'); // 异步操作完成后直接导航
  } catch (err) {
    dispatch({ type: 'FETCH_USER_FAILURE', payload: err.message });
    navigateTo('/error');
  }
};

注意：该方式需确保setNavigate仅在客户端渲染时调用，SSR场景需额外处理。

方案3：自定义Redux中间件（监听导航action） #

通过自定义中间件监听特定类型的action，直接在中间件中执行导航操作，无需组件介入。

步骤：

• 创建history对象（需依赖history包），配合React Router的Router组件使用
• 编写中间件监听NAVIGATE类型的action，调用history对象完成导航

示例代码：

创建history对象

// utils/history.js
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

导航中间件

// middleware/navigationMiddleware.js
export const navigationMiddleware = (history) => (store) => (next) => (action) => {
  if (action.type === 'NAVIGATE') {
    history.push(action.payload);
  }
  return next(action);
};

配置Redux Store

// store/index.js
import { configureStore } from '@reduxjs/toolkit';
import { history } from '../utils/history';
import { navigationMiddleware } from '../middleware/navigationMiddleware';
import rootReducer from './reducers';

export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(navigationMiddleware(history))
});

配置React Router

// index.js
import { Router } from 'react-router-dom';
import { history } from './utils/history';
import { store } from './store';
import { Provider } from 'react-redux';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root')
);

之后需要导航时，直接dispatch对应action即可：

dispatch({ type: 'NAVIGATE', payload: '/目标路径' });

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