耀极客论坛

 找回密码
 立即注册
查看: 633|回复: 0

React Router V6更新内容详解

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-8 02:22:36 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了React Router V6更新内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

React Router V6 变更介绍
  之前一直在用5.x版本的Router,突然发现Router V6有一些变化,可以说是对嵌套路由更加友好了。这里,我们就做个简单的介绍。

1. ‹ Switch > 重命名为‹ Routes >
  之前在用Router时,需要用Switch包裹,Switch可以提高路由匹配效率(单一匹配) 。在V6中,该顶级组件将被重命名为Routes,注意的是其功能大部分保持不变。

2. ‹ Route >的新特性变更
  component/render被element替代
  1. // v5
  2. ‹Switch>
  3.     ‹Route  path="/about" component={About}/>
  4.     ‹Route  path="/home" component={Home}/>
  5. ‹/Switch>
  6. //v6
  7. ‹Routes>
  8.     ‹Route  path="/about" element={‹About/>}/>
  9.     ‹Route  path="/home" element={‹Home/>}/>
  10. ‹/Routes>
复制代码
3. 嵌套路由变得更简单

3.1 具体变化有以下:
       
  • ‹ Route children > 已更改为接受子路由。   
  • 比‹ Route exact >和‹ Route strict >更简单的匹配规则。   
  • ‹ Route path > 路径层次更清晰。
  1. function App() {
  2.   return (
  3.     ‹BrowserRouter>
  4.       ‹Routes>
  5.         ‹Route path="/" element={‹Home />} />
  6.         ‹Route path="/about" element={‹About/>}>
  7.           ‹Route path="/about/message" element={‹Message/>} />
  8.           ‹Route path="/about/news" element={‹News/>} />
  9.         ‹/Route>
  10.       ‹/Routes>
  11.     ‹/BrowserRouter>
  12.   );
  13. }
  14. function About() {
  15.   return (
  16.     ‹div>
  17.       ‹h1>About‹/h1>
  18.       ‹Link to="/about/message">Message‹/Link>
  19.   ‹Link to="/about/news">News‹/Link>
  20.         {/*
  21.        将直接根据上面定义的不同路由参数,渲染‹MyProfile />或‹OthersProfile />
  22.         */}
  23.       ‹Outlet />
  24.     ‹/div>
  25.   )
  26. }
复制代码
  这里的‹ Outlet /> 相当于占位符,像极了{this.props.children},也越来越像Vue了
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 04:27 , Processed in 0.064300 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表