使用React Router Dom和Redux点击组件打开多新标签页状态不持久如何解决

1. 单次点击打开多个新标签页路由 #

Link 组件仅支持单一路由跳转，Redirect 仅支持单页应用内的路由重定向，二者都不满足单次触发打开多个新标签页的需求，直接使用浏览器原生 window.open 即可实现：

const onClickBox = () => {
  // 第一个参数为对应路由的路径，第二个参数固定为'_blank'表示新标签页打开
  window.open('/page-one-route', '_blank');
  window.open('/page-two-route', '_blank');
  
  // 若当前页面需要执行拉数逻辑保留以下两行，若拉数是给新页面用的可删除，移到对应页面的初始化逻辑中
  onClickPageOne();
  onClickPageTwo();
}

注意：window.open 必须在用户交互的同步回调中执行，否则会被浏览器判定为恶意弹窗拦截。同域下的路径会自动复用React Router的前端路由规则，不需要额外配置。

2. 新标签页Redux状态持久化解决 #

Redux默认将状态存储在当前页面的内存中，新打开的标签页是独立的运行上下文，默认无法获取原页面的Redux状态，可通过以下两种方案解决：

方案1：手动存储核心状态到本地存储 #

将认证相关的核心数据（如token、用户信息）存储到localStorage/sessionStorage中，Redux初始化时从本地存储读取初始值：

// auth reducer 初始化时从localStorage取值
const initialAuthState = {
  token: localStorage.getItem('authToken') || null,
  userInfo: JSON.parse(localStorage.getItem('userInfo') || 'null'),
  isAuthenticated: !!localStorage.getItem('authToken')
}

// 登录/退出时同步更新localStorage和Redux状态
const authReducer = (state = initialAuthState, action) => {
  switch(action.type) {
    case 'LOGIN_SUCCESS':
      localStorage.setItem('authToken', action.payload.token);
      localStorage.setItem('userInfo', JSON.stringify(action.payload.userInfo));
      return {
        ...state,
        token: action.payload.token,
        userInfo: action.payload.userInfo,
        isAuthenticated: true
      }
    case 'LOGOUT':
      localStorage.removeItem('authToken');
      localStorage.removeItem('userInfo');
      return initialAuthState;
    default:
      return state;
  }
}

方案2：使用redux-persist实现自动持久化 #

如果需要持久化的状态较多，可直接集成redux-persist库，配置白名单将需要跨标签页同步的reducer（如auth）加入持久化列表，新标签页初始化时会自动从本地存储同步状态：

// store 配置示例
import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认使用localStorage
import authReducer from './authSlice';
import pageOneReducer from './pageOneSlice';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['auth'] // 仅将auth reducer的状态持久化
}

const persistedAuthReducer = persistReducer(persistConfig, authReducer);

export const store = configureStore({
  reducer: {
    auth: persistedAuthReducer,
    pageOne: pageOneReducer
  }
});

export const persistor = persistStore(store);

额外注意事项 #

你原有代码中dispatch(actions.fetchDataPageOne)、dispatch(actions.fetchDataPageTwo)是在当前页面触发的，新打开的标签页无法获取这两个请求返回的数据，需要将这两个拉数逻辑放到对应页面的useEffect初始化钩子中，页面加载时自行触发拉取。

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