react-router@5.5.1报错：'react-router'不存在BrowserRouter导出项

嘿，这个问题我太熟了！React Router从v4版本开始就做了核心库和平台特定库的拆分，这也是很多刚从旧版本过渡过来的开发者容易踩的坑。结合你用的5.5.1版本，咱们一步步解决：

1. 核心问题原因 #

• BrowserRouter不在react-router包里：从v4开始，浏览器环境用的路由组件（比如BrowserRouter、HashRouter）都被移到了react-router-dom这个独立包中，react-router只保留了路由核心逻辑和通用API。
• Match和Miss已经被废弃：这两个是React Router v3及更早版本的组件，在v5里已经被Route和Switch替代了。

2. 具体修复步骤 #

第一步：安装对应版本的react-router-dom

既然你用的是react-router@5.5.1，请确保安装同版本的react-router-dom（版本要一致，避免兼容性问题）：

# npm 安装
npm install react-router-dom@5.5.1

# 或者用 yarn
yarn add react-router-dom@5.5.1

第二步：修改导入语句并替换废弃组件

把你的导入代码改成从react-router-dom导入，同时替换Match/Miss为Route/Switch：

import { render } from 'react-dom';
// 从react-router-dom导入正确的组件
import { BrowserRouter, Route, Switch } from 'react-router-dom';

第三步：调整组件用法（替换Match/Miss）

• 原来的Match对应现在的Route，用法示例：

  // 旧写法（v3）
  <Match path="/home" component={Home} />
  
  // 新写法（v5）
  <Route path="/home" component={Home} />
  

• 原来的Miss对应Switch配合无path的Route，用来渲染没有匹配到任何路径的组件：

  // 旧写法（v3）
  <Miss component={NotFound} />
  
  // 新写法（v5）
  <Switch>
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
    {/* 最后这个无path的Route就会在前面都不匹配时渲染，相当于原来的Miss */}
    <Route component={NotFound} />
  </Switch>
  

额外提醒 #

日常开发浏览器端的路由，你几乎不需要直接导入react-router的内容，react-router-dom已经包含了所有你需要的浏览器环境路由组件和API。

内容的提问来源于stack exchange，提问作者Flame of udun