React 18.2.0是否支持connected-react-router？依赖冲突如何解决？

问题原因 #

connected-react-router@6.9.3的peer依赖要求React版本为^16.4.0 || ^17.0.0，而你当前使用的是React 18.2.0，版本不匹配导致npm依赖解析失败。另外需要注意，connected-react-router项目已停止维护（最后更新于2021年），官方不再提供React 18的兼容支持。

解决方案 #

方案1：强制忽略peer依赖安装（临时解决） #

如果需要快速推进开发，可以用npm的参数跳过依赖冲突检查：

• 使用旧版peer依赖解析规则（推荐，风险较低）：

npm install --save connected-react-router --legacy-peer-deps

• 强制安装（可能引发未知兼容性问题）：

npm install --save connected-react-router --force

安装后可正常使用connectRouter，但后续若出现路由异常，建议切换到长期维护的方案。

方案2：迁移到React Router官方兼容的路由状态管理方式 #

由于connected-react-router已停止维护，推荐用React Router v6结合Redux的原生能力同步路由状态：

1. 安装最新版React Router：

npm install react-router-dom@latest

2. 在Redux中实现路由状态同步：

// reducers/routerReducer.js
const initialState = {
  pathname: window.location.pathname,
  search: window.location.search,
};

export const routerReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ROUTE_CHANGED':
      return { ...state, ...action.payload };
    default:
      return state;
  }
};

// actions/routerActions.js
export const routeChanged = (payload) => ({
  type: 'ROUTE_CHANGED',
  payload,
});

// 路由同步组件
import { useLocation, useEffect } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { routeChanged } from './actions/routerActions';

const RouteSync = () => {
  const location = useLocation();
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(routeChanged({
      pathname: location.pathname,
      search: location.search,
      hash: location.hash,
    }));
  }, [location, dispatch]);

  return null;
};

// 根组件中引入同步逻辑
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import RouteSync from './RouteSync';

const App = () => (
  <Provider store={store}>
    <BrowserRouter>
      <RouteSync />
      {/* 你的业务组件 */}
    </BrowserRouter>
  </Provider>
);

这种方式无需依赖第三方库，直接利用React Router和Redux的原生能力，兼容性更好且长期维护有保障。

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