react 导入 react-router-dom@6.3.0版本,引入Switch报 ‘Switch‘ is not exported from ‘react-router-dom‘

最新推荐文章于 2023-01-02 17:18:10 发布

春小白

最新推荐文章于 2023-01-02 17:18:10 发布

阅读量909

点赞数 1

分类专栏： React 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_63573982/article/details/125042845

版权

在升级react-router-dom到v6.3.0后，Switch被重命名为Routes，Route的component属性变为element，嵌套路由和历史管理也有所改变。新的API Outlet简化了嵌套路由，useNavigate替代了useHistory，useRoutes取代了react-router-config。此外，React Router v6的包体积减小了一半以上。

摘要由CSDN通过智能技术生成

如上图所示报错,经过查阅学习:

react-router-dom从V5升级到V6后，有些使用做了改变：

(1) Switch 重命名为 Routes

// v5中:  exact 精确路由 component 组件
<Switch>
    <Route exact path="/">
      <Home />
    </Route>
    <Route path="/profile" component={Profile}>
    </Route>
</Switch>

// v6中:
<Routes>
    <Route path="/" element={<Home />} />
    <Route path="profile/*" element={<Profile />} />
</Routes>

(2) Route 的新特性变更 ,component/render被element替代

.component={ App }

.element={ <App/> }

// 引入组件
import Profile from './Profile';

// v5
<Route path=":userId" component={Profile} />
<Route
  path=":userId"
  render={routeProps => (
    <Profile routeProps={routeProps} animate={true} />
  )}
/>

// v6
<Route path=":userId" element={<Profile />} />
<Route path=":userId" element={<Profile animate={true} />} />

(3) 嵌套路