以下是两个版本之间的区别：
一、首先是注册路由的时候v5的Switch改为了Routes
v5，代码如下：
import {Route, Switch} from 'react-router-dom' //引入react-router
<div>
{/* 注册路由（编写路由链接） */}
<Switch>
......
......
</Switch>
</div>
v6，代码如下：
import {Route, Routes } from 'react-router-dom' //引入react-router
<div>
{/* 注册路由（编写路由链接） */}
<Routes >
......
......
</Routes>
</div>
二、v6不再支持用Route标签包裹子组件，可以直接使用element属性 也不需要
v5，代码如下：
import {Route, Switch} from 'react-router-dom' //引入react-router
<div>
{/* 注册路由（编写路由链接） */}
<Switch>
<Route path="/about">
<About />
</Route>
</Switch>
</div>
v6，代码如下：
import {Route, Routes } from 'react-router-dom' //引入react-router
<div>
{/* 注册路由（编写路由链接） */}
<Routes >
<Route path="/about" element={<About />} />
</Routes>
</div>
如果v5不用包裹子组件的形式写的话他的属性是component，下面代码有体现到。
三、v6中也不需要exact属性
exact在v5中起到的作用是精准匹配的作用，如果不写的话，
那么 path='/'也会匹配'/about'和'/home'导致的结果就是下面两个路由就没用了
在v6中由于v6 内部算法改变，它默认就是匹配完整路径。
v5，代码如下：
import {Route, Switch} from 'react-router-dom' //引入react-router
<div>
{/* 注册路由（编写路由链接） */}
<Switch>
<Route exact path="/" component={ Home } >
</Route>
</Switch>
</div>
v6，代码如下：
import {Route, Routes } from 'react-router-dom' //引入react-router
<div>
{/* 注册路由（编写路由链接） */}
<Routes >
<Route path="/" element={<Home />} />
</Routes>
</div>
四、v6 中，Route 先后顺序不再重要，它能够自动找出最优匹配路径
五、在v6中移除了NavLink中的actionclassName的这个属性
actionclassName这个属性是点击对应元素改变为对应的样式
在v6中可以使用三元运算符的方式实现这个功能
<NavLink className={navData=>navData.isActive?class.active : ""}
六、在v6中将Redirect改为Navigate
它当匹配不到路由时，需要使用Redirect做重定向，跳转到我们定义的组件（页面）中
v5，代码如下
在页面中直接写入重定向的路径
<Redirect to="/home/" />
v6，代码如下：
<Route path="/" element ={<Navigate replace to="/home" />} />
七、v6 嵌套路由改为相对匹配，不再像 v5 那样必须提供完整路径。
八、新增Outelt组件
此组件是一个占位符，告诉 React Router 嵌套的内容应该放到哪里。
<Link to="/home2">子路由</Link>
<Outlet></Outlet>
九、v6 用useNavigate实现编程式导航，不再使用useHistory
代码如下：
import {useNavigate} from "react-router-dom";
const navigate = useNavigate();
navigate("/home");
是除此之外，还可以使用navigate(-1) 后退到前一页，使用navigate-2)后退到前一页的前一页， navigate(1)前向导航，依此类推
十、v6 目前没有prompt组件阻止不期望的导航。
如果在 v6 中要实现相应的功能，必须自己想办法，这可能是目前 v5 唯一的优势。
