React从0开始:React Router Hooks

436 阅读3分钟

这是我参与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做一个匹配,pathLink组件中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 pathpath="/user/:id"),随后通过this.props.match.params.xxx获取参数
  • query方法:添加方法,方法内通过this.props.history.push({pathname:'/xxx',query:{xxx:xxx}})跳转路由并传参,随后通过this.props.location.query.xxx获取参数
  • state方法:配置Link toto={ { pathname:"/user",state:{xxx:xxx} } }),随后通过this.props.location.state.xxx获取参数

Route路由钩子

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

  1. useHistory:我们可以利用这个钩子函数返回的对象快速跳转路由
    const history = useHistory();
    ...
    <div onClick={ ()=>{ history.push( { pathname:"/user" , query:{id:0} } ) } }>用户中心</div>
    
  2. useParams:我们可以利用这个钩子函数返回的对象获取传过来的参数
    //跳转后的组件
    const {id} = useParams();
    ...
    <div>hello user:{id}</div>
    
  3. useLocation:我们可以用这个钩子函数来获取当前的Location对象
    //跳转后的组件
    const {pathname} = useLocation();
    ...
    <div>url:{pathname}</div>
    

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