react 中router v6 与 v5 区别

react-router-dom 更新到v6 , 本文分享下v6 与 v5 的一些区别

1. v6 中 Switch 名称变为 Routes

代码如下：

2. v6 <Route>的变化

不再支持子组件和 component , 改为 element

改为

注：

element 的值为组件标签，不要忘记写成标签形式

Route 标签必须包含在Routes标签里，会不然报错

3. v6 中，exact 属性不再需要

v6 内部算法改变，不再需要加exact实现精确匹配路由，默认就是匹配完整路径。

如果需要旧的行为，路径后加/*

4. v6 中，Route 先后顺序不再重要，React Router 能够自动找出最优匹配路径

5.v6 保留Link，NavLink， 但是NavLink的activeClassName属性被移除

删除了 activeClassName 样式，如果想自己给它设置想要的highligh样式.

可以通过style属性修改actived的状态, 通过箭头函数接收到isActive参数值;

style接收一个css样式数据返回值进行修改<NavLink> active状态样式。

6. v6 移除 Redirect组件，改为使用 Navigate:

<Navigate replace to="/welcome" /> 是对旧的 Redirect 的完整取代。

replace 属性也可以省略，不过行为由 replace 改为 push

7. v6 嵌套路由改为相对匹配

嵌套路由必须放在<Routes> </Routes>中，且使用相对路径，不再像 v5 那样必须提供完整路径，因此路径变短。

8.使用Outlet组件，此组件是一个占位符，告诉 React Router 嵌套的内容应该放到哪里。

9. 使用index 指定默认路由, 或者path为空

当嵌套路由有多个子路由的时候，可以增加 index 属性来指定默认路由。

或者

设置path为空，来指定默认路由，代码如下：

10. v6 用useNavigate实现编程式导航，useHistory被移除

如果要重定向:

除此之外，还可以使用navigate(-1)后退到前一页，使用navigate(-2)后退到前一页的前一页，navigate(1)前向导航，依此类推。

11. hooks 中获取参数的方法

useParams

返回当前动态路由参数

useSearchParams

使用 useSearchParams hook 来访问查询参数(/xx/xx?userId=123)。其用法和 useState 类似，会返回当前对象和更改它的方法。

更改 searchParams 时，必须传入所有的查询参数，否则会覆盖已有参数。

12. useRoutes 声明式的路由配置方式

声明式路由中，不能写index, 可以让path: "" , 来实现显示默认组件;

useRoutes函数，会返回已经渲染好的路由元素

苟有恒 , 何必三更眠五更起

关注我 ，一起学习吧   

鼓励一下，赐个赞 和 在看吧

( 公主号: bug 收集 )