如何将React Router Dom v5代码转为v6.3？解决createBrowserRouter报错

报错原因 #

createBrowserRouter和RouterProvider是React Router Dom v6.4版本才新增的API，你当前使用的v6.3版本并不包含这两个方法，因此会出现导入报错。

解决方案 #

方案1：升级React Router Dom到v6.4及以上版本

执行以下命令升级依赖：

npm install react-router-dom@6.4+
# 或者直接安装最新稳定版
npm install react-router-dom@latest

升级完成后，你提供的原代码即可正常运行。

方案2：适配v6.3版本的路由写法

如果不想升级版本，可使用v6.0至v6.3版本支持的<BrowserRouter>+<Routes>+<Route>组合写法，示例代码如下：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import routesConfig from "./routesConfig";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {routesConfig.map((route) => (
          <Route
            key={route.path}
            path={route.path}
            element={route.element}
            children={route.children?.map((child) => (
              <Route
                key={child.path}
                path={child.path}
                element={child.element}
              />
            ))}
          />
        ))}
      </Routes>
    </BrowserRouter>
  );
};

export default App;

注意：需确保你的routesConfig结构符合v6.3要求，每个路由对象需包含path（路径）、element（渲染组件），子路由通过children字段定义。

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