模块““react-router-dom“”没有导出的成员“Switch”.解决方法

今天导入react-router-dom，出现了这个错误：模块“"react-router-dom"”没有导出的成员“Switch”。

原来是因为版本问题，最新install的版本是"react-router-dom": "^6.3.0",

所以想要解决这个问题，有两个思路，1.改成版本6的写法；2.降版本

下面我们逐一说明：

1.改成版本6的写法，我们可以用，Routes代替Switch

import { BrowserRouter, Route, Routes } from "react-router-dom"

<Routes>

<Route exact path="/" element={<HomePage/>} />

...

</Routes>

上面的代码需要注意，<Route exact path="/" component={HomePage}> 这句是原来用switch的写法，注意版本不同写法不同。

2.降版本

npm install react-router-dom@5.2.0（这里5.2.0是你需要的任意版本即可）

---------------------------

下面来说一下，这个 版本6 的一些小变化

Routes：

• 代替Switch组件,不会向下匹配
• 用来包裹Route

Route：

• 必须被Routes组件包裹
• component属性变成element
• caseSensitive 路径大小写敏感属性，默认是不敏感（访问/about = /ABOUT）
• index 与path属性是互斥的，index表示为当前路由的根
• 可以用作layout组件，不写element属性，写了要与 Outlet组件配合使用（嵌套路由）

Navigate：

• 用来代替Redirect组件
• replace属性 跳转模式 "PUSH" | "REPLACE"
• 只要这个组件一渲染就会发生跳转

NavLink：

• className，自定义激活时的样式名 可以为字符串或者函数
• end 匹配子路由时是否高亮
• caseSensitive 代表匹配路径时是否区分大小写

等等

补充exact好像不能用了，exact 为true表示严格匹配，false不严格。