react-router v6无法搭配connected-react-router时的重定向解决方案

方案一：在TSX组件里监听Store变化，用useNavigate实现重定向 #

完全可行，就是在组件层面盯着Store的状态变化触发路由跳转，逻辑直白，适合不需要全局复用重定向逻辑的场景。

实现步骤： #

1. 在Redux的slice/reducer里新增一个标记重定向的字段（比如redirectTo），等createMember异步操作完成后更新这个字段。
2. 在需要跳转的组件中，用useSelector监听redirectTo的变化，同时用useNavigate获取路由跳转函数。
3. 一旦redirectTo有有效值，调用navigate完成跳转，记得重置redirectTo避免组件重新渲染时重复跳转。

代码示例： #

1. 更新Redux状态（以slice为例）

// membersSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface MembersState {
  redirectTo: string | null;
  // 其他业务状态字段...
}

const initialState: MembersState = {
  redirectTo: null,
};

const membersSlice = createSlice({
  name: 'members',
  initialState,
  reducers: {
    setRedirectTo: (state, action: PayloadAction<string | null>) => {
      state.redirectTo = action.payload;
    },
    // 其他reducer逻辑...
  },
});

export const { setRedirectTo } = membersSlice.actions;
export default membersSlice.reducer;

2. 修改operations.ts中的异步操作

// operations.ts
import { setRedirectTo } from './membersSlice';

export function createMember(data: User) {
  return async (dispatch: Dispatch<Action>) => {
    try {
      // 执行创建成员的API请求逻辑
      // await api.createMember(data);
      
      // 操作完成后设置重定向目标
      dispatch(setRedirectTo('/members'));
    } catch (err) {
      // 错误处理逻辑
    }
  };
}

3. 在组件中监听并执行重定向

// MemberCreate.tsx
import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { setRedirectTo } from './membersSlice';
import { createMember } from './operations';

const MemberCreate = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const redirectTo = useSelector((state: RootState) => state.members.redirectTo);

  useEffect(() => {
    if (redirectTo) {
      navigate(redirectTo);
      // 重置状态，防止组件重渲染时重复跳转
      dispatch(setRedirectTo(null));
    }
  }, [redirectTo, navigate, dispatch]);

  const handleSubmit = (data: User) => {
    dispatch(createMember(data));
  };

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

方案二：给Redux Store添加自定义中间件处理路由跳转 #

也完全可行，属于把路由跳转逻辑全局封装，适合多个异步操作都需要重定向的场景，不用在每个组件里重复写监听逻辑。

实现步骤： #

1. 编写自定义Redux中间件，专门拦截特定类型的重定向action（比如ROUTER/NAVIGATE）。
2. 在中间件中获取React Router的navigate函数，匹配到重定向action时调用它完成跳转。
3. 将这个中间件加入Redux Store的中间件列表。
4. 在operations.ts中直接分发重定向action，由中间件处理实际的路由跳转。

代码示例： #

1. 创建自定义路由中间件

// routerMiddleware.ts
import { Middleware } from '@reduxjs/toolkit';
import { NavigateFunction } from 'react-router-dom';

// 定义重定向action的类型
interface NavigateAction {
  type: 'ROUTER/NAVIGATE';
  payload: {
    to: string;
    // 可选：是否替换当前历史记录，对应navigate的第二个参数
    replace?: boolean;
  };
}

// 工厂函数，用于传入navigate函数
export const createRouterMiddleware = (navigate: NavigateFunction): Middleware => {
  return () => (next) => (action) => {
    if (action.type === 'ROUTER/NAVIGATE') {
      const { to, replace = false } = action.payload;
      navigate(to, { replace });
    }
    return next(action);
  };
};

2. 在Store中集成中间件

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import { createRouterMiddleware } from './routerMiddleware';
import { NavigateFunction } from 'react-router-dom';

// 导出初始化store的函数，用于在App组件中传入navigate
export const initStore = (navigate: NavigateFunction) => {
  const routerMiddleware = createRouterMiddleware(navigate);
  
  return configureStore({
    reducer: {
      // 你的业务reducers...
    },
    middleware: (getDefaultMiddleware) => 
      getDefaultMiddleware().concat(routerMiddleware),
  });
};

3. 在App组件中初始化Store并传入navigate

// App.tsx
import { BrowserRouter, useNavigate } from 'react-router-dom';
import { Provider } from 'react-redux';
import { initStore } from './store';

const AppWrapper = () => {
  const navigate = useNavigate();
  const store = initStore(navigate);

  return (
    <Provider store={store}>
      {/* 你的路由组件... */}
    </Provider>
  );
};

const App = () => {
  return (
    <BrowserRouter>
      <AppWrapper />
    </BrowserRouter>
  );
};

4. 修改operations.ts中的异步操作

// operations.ts
// 创建重定向action的工具函数
export const navigate = (to: string, replace?: boolean) => ({
  type: 'ROUTER/NAVIGATE',
  payload: { to, replace },
});

export function createMember(data: User) {
  return async (dispatch: Dispatch<Action>) => {
    try {
      // 执行创建成员的API请求逻辑
      // await api.createMember(data);
      
      // 分发重定向action，由中间件处理跳转
      dispatch(navigate('/members'));
    } catch (err) {
      // 错误处理逻辑
    }
  };
}

两种方案对比 #

• 方案一：实现简单，无需修改Store配置，适合小型项目或局部场景；缺点是每个需要重定向的组件都要写监听逻辑，代码重复度较高。
• 方案二：全局封装路由逻辑，复用性强，适合中大型项目；缺点是需要额外配置中间件，对Redux中间件不熟悉的开发者可能有上手成本。

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