react-router-dom V5 与 V6 区别

v5 文档 v6 文档

Route 配置

• v5 component
• v6 element

<Route path="" element={}/>

Route 容器组件

• v5 Switch
• v6 Routes

<Routes>
  <Route/>
</Routes>

props 参数差异

• v5 会主动向路由组件的 props 注入路由对象

• v6 props 中不再提供路由对象，需要使用对应的 hook 实现

  • 例如:动态路由参数，需要使用 useParams 提取

let params = useParams()

子路由配置方式不同

• v5 在每层主组件中配置 Route
• v6 在根组件中配置 Route 嵌套，主路由组件中通过 Outlet 呈现子组件

<Routes>
	<Route path="/home">
		<Route />  //子路由
	</Route>
</Routes>

编程式导航

• v5 this.props.history.push()
• v6
  • useNavigate 触发编程式导航跳转
  • useLocation 提取编程式导航参数

路由守卫实现不同

• v5 render 实现拦截
• v6 自定义封装守卫组件，控制props.children