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

[haizhilin2013]

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

[sin7777]

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 查询字符串

参考：关于 React Router 4 的一切