[react-router] React-Router 3和React-Router 4有什么变化？添加了什么好的特性？

Posted 2021-12-20 前端小歌谣

[react] React-Router 3和React-Router 4有什么变化？添加了什么好的特性？

React-Router 4 从设计思想上进行改变，引入动态路由，将路由进行了拆分，将其放到了各自的模块中，不再有单独的 router 模块，充分体现了组件化的思想，更加贴合 React 的思想。

具体表现：

• 包含式路由与exact
  • 在之前的版本中，在 Route 中写入的 path，在路由匹配时是独一无二的，路由的嵌套体现在 <Route> 组件的嵌套规则上
  • v4 版本则有了一个包含的关系：如匹配 path="/users" 的路由会匹配 path="/"的路由，在页面中这两个模块会同时进行渲染。
  • v4中多了 exact 关键词，表示只对当前的路由进行匹配。
• 独立路由：Switch（排他性路由）
  • 采用 <Switch>，只有一个路由会被渲染，并且总是渲染第一个匹配到的组件
  • 配合使用 exact
• "Index Routes" 和 "Not Found"
  • 废弃了 <IndexRoute>，而该用 <Route exact> 的方式进行代替
  • 如果没有匹配的路由，也可通过 <Redirect> 来进行重定向到默认页面或合理的路径。
• 嵌套布局
• 授权路由
• <Link> vs <NavLink>
• URL 查询字符串

 个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题