React-router5与React-router6之间不兼容。6相当于简化的版本。

• 配置

安装、引入与版本5变化不大。

• 使用 映射

要在外面加一个<Routes>标签 v6新加的组件

Routes（一定要写）的作用和v5中的Switch（可写可不写）类似，都是用于Route的容器。Routes中的Route只有一个会被匹配。

v6中，Route的component、render、children都变了，需要通过element来指定要挂载的组件。element中只能传入JSX。

获取参数的方式

使用钩子，与v5一样，但是有些钩子名称有不同

useNavigate(); 获取一个用于跳转页面的函数，与v5中的History函数一样

在这里nav() 使用的是push，会产生新的历史记录。

如果想使用替换replace，在nav中添加一个参数，不会产生新的历史记录:

关闭严格匹配

在v6中，默认是使用严格匹配，我们可以将严格模式关闭，使用*

实现路由嵌套

只有当访问的是hello路由，才能访问到Hello组件。但是这种方法不利于维护。还有另一种在v6中新的实现方法：(也就是直接在Route中实现嵌套)

现在存在的问题就是，我们是直接在App.js中实现路由嵌套的。但是在About组件中，压根就不存在Hello组件（没有引入），因此App组件根本就不知道Hello组件的存在，因此Hello组件无法在App组件中正常显示出来。

解决办法：Outlet

用来表示嵌套路由中匹配到的组件。 当嵌套路由中的路径匹配成功了，Outlet则表示嵌套路由中的组件；当嵌套路由中的路径没有匹配成功，Outlet就什么也不是。

• Navigate组件

用来实现路由跳转。 与Redirect类似

Redirect组件默认使用replace进行跳转

Navigate组件用来跳转到指定的位置，默认使用push跳转，无法回退

可以加一个replace来实现替换

当访问About组件的时候，页面会跳转到 xxx/student/1 路径。

• NavLink组件

在v5中，我们一般使用的是普通的Link组件。在v5中使用NavLink组件时的使用规则一般是：

但是v6中不再是这种规则了。在v6中，而是通过回调函数的方式修改style：