接入connected-react-router后出现pathname未定义报错问题

核心原因 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')错误，本质是版本兼容性冲突：

• connected-react-router@6.9.3仅支持react-router-dom@5.x版本
• 你当前使用的是react-router-dom@6.3.0，v6完全重构了路由API，和v5不兼容，导致connected-react-router无法正确获取路由上下文里的location对象

修复方案 #

方案一：降级react-router到v5（快速解决） #

如果要继续使用connected-react-router，需要把路由库降级到v5版本：

1. 卸载当前v6版本：

npm uninstall react-router-dom

2. 安装v5兼容版本：

npm install react-router-dom@5.3.0

3. 修改Main.js适配v5的API：

// Main.js
import { Switch, Route, useLocation } from 'react-router-dom';
import { ErrorBoundary } from '@praxis/component-logging';

import { ErrorContent } from '../components/ErrorContent';
import { LayoutSimple } from '../views/LayoutSimple';
import { Homepage } from '../views/Home/Homepage';
import { InstallationPage } from '../views/Installation/InstallationPage';
import { OnboardingPage } from '../views/Onboarding/OnboardingPage';
import { OnboardingForm } from '../views/Onboarding/OnboardingForm/OnboardingForm';
import { ScannerPage } from '../views/Onboarding/Scanner/ScannerPage';
import { LookupPage } from '../views/Lookup/LookupPage';

export const Main = () => {
  const location = useLocation();
  return (
    <ErrorBoundary key={location.pathname} FallbackComponent={ErrorContent}>
      <Switch>
        <Route path="/" component={Homepage} exact></Route>
        <Route path="/layout" component={LayoutSimple}></Route>
        <Route path="/install" component={InstallationPage}></Route>
        <Route path="/onboarding" component={OnboardingPage}></Route>
        <Route path="/scan" component={ScannerPage}></Route>
        <Route path="/registration" component={OnboardingForm}></Route>
        <Route path="/lookup" component={LookupPage}></Route>
      </Switch>
    </ErrorBoundary>
  );
};

方案二：移除connected-react-router（推荐长期方案） #

connected-react-router已多年未更新，官方停止维护，而Redux Toolkit + react-router v6本身已能很好集成路由状态管理，无需依赖该库：

1. 卸载connected-react-router：

npm uninstall connected-react-router

2. 修改store.js移除相关代码：

// store.js
import { configureStore } from '@reduxjs/toolkit';
import scannerReducer from './scanner/scannerSlice';

export default function configureAppStore(preloadedState) {
  const store = configureStore({
    reducer: {
      scanner: scannerReducer,
    },
    preloadedState,
  });

  return store;
}

3. 修改App.js用react-router v6原生的BrowserRouter替代ConnectedRouter：

// App.js
import { BrowserRouter } from 'react-router-dom';
import '@enterprise-ui/canvas-ui-css';
import { AuthProvider } from '@praxis/component-auth';
import configureAppStore from './app/store';
import { Provider } from 'react-redux';

import './globalStyles/customStyles.scss';
import './globalStyles/rootStyles.scss';
import { Main } from './views/Main';
import apiConfig from './globalConfig/apiConfig';

const initialState = {};
const store = configureAppStore(initialState);

const App = () => {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <AuthProvider {...apiConfig.auth}>
          <Main />
        </AuthProvider>
      </BrowserRouter>
    </Provider>
  );
};

export default App;

4. 若需在Redux中访问路由状态，可通过两种方式实现：
   • 在组件中用useLocation/useNavigate等hooks获取路由信息，再dispatch到Redux
   • 自定义路由监听中间件，将路由变化同步到Redux状态（可选，多数场景无需此操作）

验证修复 #

完成上述任一方案后，重启项目，路由即可正常加载，不再抛出pathname未定义的错误。

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