当我想在 react-router-dom
导出 Switch
组件时,出现了这个一个错误:'Switch' is not exported from 'react-router-dom'
,Switch
不是从 react-router-dom
导出的
原因如下:
- 在 react-router-dom 版本v5中是可以这样去写的,而我用的是版本 v6的, 它用 Routes 组件替换了 Switch。
- 两者的写法差距如下:
// 使用 Switch
import {Route, Switch} from 'react-router-dom'
return(
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
</Switch>
)
// 使用 Routes
import {Route, Routes} from 'react-router-dom'
return(
<Routes>
<Route path="/about" element={<About/>}/>
<Route path="/home" element={<Home/>}/>
</Routes>
)
Routes
类似于 组件 Switch
,但功能更强大,优点在于,Routes
根据最佳匹配选择路线,而不是按照顺序遍历,这就避免了由于无法访问的路由而导致的错误。