11-18 11:19 阅读 253

React从0开始：React Router Hooks

大家好，这一篇文章是对前几篇文章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就学习完啦，如果有什么错误的地方还望各位大佬指正呀，感谢~

作者：小阿托
链接：https://juejin.cn/post/7031476866791768100