[react-router] React-Router 3和React-Router 4有什么变化?添加了什么好的特性?
生活随笔
收集整理的這篇文章主要介紹了
[react-router] React-Router 3和React-Router 4有什么变化?添加了什么好的特性?
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
[react] React-Router 3和React-Router 4有什么變化?添加了什么好的特性?
React-Router 4 從設(shè)計(jì)思想上進(jìn)行改變,引入動(dòng)態(tài)路由,將路由進(jìn)行了拆分,將其放到了各自的模塊中,不再有單獨(dú)的 router 模塊,充分體現(xiàn)了組件化的思想,更加貼合 React 的思想。
具體表現(xiàn):
- 包含式路由與exact
- 在之前的版本中,在 Route 中寫(xiě)入的 path,在路由匹配時(shí)是獨(dú)一無(wú)二的,路由的嵌套體現(xiàn)在 <Route> 組件的嵌套規(guī)則上
- v4 版本則有了一個(gè)包含的關(guān)系:如匹配 path="/users" 的路由會(huì)匹配 path="/"的路由,在頁(yè)面中這兩個(gè)模塊會(huì)同時(shí)進(jìn)行渲染。
- v4中多了 exact 關(guān)鍵詞,表示只對(duì)當(dāng)前的路由進(jìn)行匹配。
- 獨(dú)立路由:Switch(排他性路由)
- 采用 <Switch>,只有一個(gè)路由會(huì)被渲染,并且總是渲染第一個(gè)匹配到的組件
- 配合使用 exact
- "Index Routes" 和 "Not Found"
- 廢棄了 <IndexRoute>,而該用 <Route exact> 的方式進(jìn)行代替
- 如果沒(méi)有匹配的路由,也可通過(guò) <Redirect> 來(lái)進(jìn)行重定向到默認(rèn)頁(yè)面或合理的路徑。
- 嵌套布局
- 授權(quán)路由
- <Link> vs <NavLink>
- URL 查詢字符串
?個(gè)人簡(jiǎn)介
我是歌謠,歡迎和大家一起交流前后端知識(shí)。放棄很容易,
但堅(jiān)持一定很酷。歡迎大家一起討論
主目錄
與歌謠一起通關(guān)前端面試題
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的[react-router] React-Router 3和React-Router 4有什么变化?添加了什么好的特性?的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: postsql字符串字段转数字用法
- 下一篇: 17、【 商品管理模块开发】——后台商品