使用react-router-dom-v5-compat升级React Router到v6时遇导入报错

问题根源 #

react-router-dom-v5-compat@6.21.3 依赖同版本的 react-router 和 react-router-dom（v6.x），你的项目中同时存在v5和v6版本的路由包，导致compat库试图从v5版本的react-router中导入仅在v6存在的导出项（比如AbortedDeferredError），从而引发批量导入错误。

解决方案 #

1. 清理现有路由依赖 #

先卸载所有相关包，确保依赖环境干净：

npm uninstall react-router react-router-dom react-router-dom-v5-compat

2. 重新安装匹配版本的依赖 #

直接安装同版本的v6路由包和兼容库（react-router是react-router-dom的子依赖，无需单独安装）：

npm install react-router-dom@6.21.3 react-router-dom-v5-compat@6.21.3

3. 修正路由组件嵌套结构 #

CompatRouter 需要配合v6的BrowserRouter使用，而非v5的Router。修改你的index.js代码：

// 导入正确的组件
import { BrowserRouter } from 'react-router-dom';
import { CompatRouter } from 'react-router-dom-v5-compat';

loadMessages()
  .then((messages) => {
    const container = document.getElementById('root');
    const root = createRoot(container);
    root.render(
      <Provider store={store}>
        <IntlProvider locale={locale} messages={messages} defaultLocale='en-gb'>
          <StyledEngineProvider injectFirst>
            <MaterialThemeProvider theme={theme}>
              <ThemeProvider theme={theme}>
                <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={enGB}>
                  <InactivityLogoutProvider>
                    {/* 替换v5的Router为v6的BrowserRouter */}
                    <BrowserRouter>
                      <CompatRouter>
                        <App />
                      </CompatRouter>
                    </BrowserRouter>
                  </InactivityLogoutProvider>
                </LocalizationProvider>
              </ThemeProvider>
            </MaterialThemeProvider>
          </StyledEngineProvider>
        </IntlProvider>
      </Provider>
    );
  });

4. 清除构建缓存 #

如果修改后仍有问题，清除npm缓存和项目构建缓存：

npm cache clean --force
# 若使用Create React App，额外执行：
npm run build --clean

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