今天导入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不严格。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐