[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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。