react-router-dom无法定位RouterProvider的技术问题咨询

数据老陈

2026-7-10

问题分析与解决方案

核心原因

你安装的react-router-dom是v5.3.4版本，而RouterProvider、createBrowserRouter这些API是React Router v6才引入的新特性，v5版本中根本不存在这些组件/方法，所以你找不到对应的导出，并非名称变更。

解决方案

方案一：升级到React Router v6

这是推荐方案，v6相比v5有更简洁的API和更好的性能：

执行升级命令：

npm install react-router-dom@latest localforage match-sorter sort-by

修改入口代码，补充缺失的导入并修正逻辑：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider, createBrowserRouter, Link } from "react-router-dom";
import './index.css'

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <div>
        <h1>Hello World</h1>
        <Link to="about">About Us</Link>
      </div>
    ),
  },
  {
    path: "about",
    element: <div>About</div>,
  },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
)

方案二：继续使用React Router v5

如果不想升级版本，适配v5的路由写法即可——v5中没有RouterProvider，而是用BrowserRouter配合Switch和Route实现路由：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <Switch>
        {/* exact 确保严格匹配根路径 */}
        <Route exact path="/">
          <div>
            <h1>Hello World</h1>
            <Link to="/about">About Us</Link>
          </div>
        </Route>
        <Route path="/about">
          <div>About</div>
        </Route>
      </Switch>
    </BrowserRouter>
  </React.StrictMode>
)