react路由v6讲解

React-Router V6版本的升级了也有段时间了，部分同学还是对v6版本有一些地方不太理解，今天咱们花10分钟来讲下v5和v6有哪些使用上的差异。

一、 React-Router V6版本

React-Router V6版本常用路由组件和hooks

组件名	作用	说明
<Routers>	一组路由	代替原有<Switch>，所有子路由都用基础的Router children来表示
<Router>	基础路由	Router是可以嵌套的，解决原有V5中严格模式，后面与V5区别会详细介绍
<Link>	导航组件	在实际页面中跳转使用
<Outlet/>	自适应渲染组件	根据实际路由url自动选择组件

hooks名	作用	说明
useParams	返回当前参数	根据路径读取参数
useNavigate	返回当前路由	代替原有V5中的 useHistory
useOutlet	返回根据路由生成的element
useLocation	返回当前的location 对象
useRoutes	同Routers组件一样，只不过是在js中使用
useSearchParams	用来匹配URL中?后面的搜索参数

如表格，V6版本常用的组件和hooks，这些是新增的常用部分，不常用部分可以查看官方文档。接下来，咱们通过案例的形式来比较上面新增的那些变化。

1. 路由的基本使用

在app.js中分别搭建home和about页面路由。

v5的写法

import { HashRouter,Route,Switch } from 'react-router-dom'
......
<HashRouter>
  <Switch>
   <Route path="/home" component={ Home }></Route>
   <Route path="/about" component={ About }></Route>
  </Switch>
</HashRouter>

v6的写法

import { HashRouter,Route,Routes } fro