React从0开始：React Router Hooks这是我参与11月更文挑战的第17天，活动详情查看：2021最后一

这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战

大家好，这一篇文章是对前几篇文章React Router的一个总结，并且会写出最后一个内容：与React Router相关的钩子函数Hooks

我们先来简单复习一下前几篇文章的内容，以便为Hooks的内容的了解做一个铺垫

一、`React Router`的包

React Router有三个包：

react-router：核心包，无需单独安装
react-router-dom：用于开发Web应用，依赖于核心包，安装该包会自动安装核心包
react-router-native：用于开发Native应用，也依赖于核心包

安装很简单，进入你的React项目后使用npm安装就可以了：

npm install react-router-xxx

二、`React Web`应用开发的`Router`

1.路由模式

路由模式有两种：

BrowserRouter：常用，一般地址没有#号，baidu.com/user
HashRouter：一般地址有#号，baidu.com/#/user

2.用到的组件以及用途

BrowserRouter组件：个人理解是相表明该组件包裹下的组件是一个单页面应用
Link组件：相当于<a>标签，配置to表明该路由跳转到哪个地址
Route组件：相当于与上面的Link做一个匹配，path与Link组件中to的配置为同一地址的则表明跳转到当前Route，随后通过component属性或包裹组件来显示页面
```
<Link to="/user" />
...
<Route path="/user" component={User} />
<Route path="/user">
    <User />
</Route>
```
Switch组件：相当于对多个Route的一个限制，表明一个Switch内一次只能跳转一个路由

3.自定义路由

我们可以在路由的匹配Route标签下按需显示内容，比如未登录显示登录页，已登录显示用户中心页

<Route path="/user">
    {
        isLogin ? (
            <User />
        ) : (
            <Login />
        )
    }
</Route>

4.重定向

重定向有点像上方的自定义路由，但是重定向用的是Redirect组件，且跳转后无法返回上一级。

import { Redirect } from 'react-router-dom';
return (
    <div>
        {
            isLogin ? null : <Redirect to={ { pathname:'/', state:{id:null} } } >
        }
    </div>
)

三、`Route`路由传参

路由传参有三种方法：

params方法：配置Route path（path="/user/:id"），随后通过this.props.match.params.xxx获取参数
query方法：添加方法，方法内通过this.props.history.push({pathname:'/xxx',query:{xxx:xxx}})跳转路由并传参，随后通过this.props.location.query.xxx获取参数
state方法：配置Link to（to={ { pathname:"/user",state:{xxx:xxx} } }），随后通过this.props.location.state.xxx获取参数

`Route`路由钩子

上面我们看了路由传参方法，我们都明白，通过this.props.xxx来获取参数或者是通过this.props.history来路由跳转都太麻烦了，React Hooks的部分钩子函数就帮我们解决了这一个问题：

useHistory：我们可以利用这个钩子函数返回的对象快速跳转路由

const history = useHistory();
...
<div onClick={ ()=>{ history.push( { pathname:"/user" , query:{id:0} } ) } }>用户中心</div>

useParams：我们可以利用这个钩子函数返回的对象获取传过来的参数
```
//跳转后的组件
const {id} = useParams();
...
<div>hello user:{id}</div>
```

useLocation：我们可以用这个钩子函数来获取当前的Location对象

//跳转后的组件
const {pathname} = useLocation();
...
<div>url:{pathname}</div>

总结以及今天的新内容就写到这，基本的React Router就学习完啦，如果有什么错误的地方还望各位大佬指正呀，感谢~

React从0开始：React Router Hooks

一、React Router的包

二、React Web应用开发的Router