这是我参与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
就学习完啦,如果有什么错误的地方还望各位大佬指正呀,感谢~