【React系列】以编程的方式使用React-Router

Mr_Carl
191 阅读2分钟

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。

通过之前的学习，我们已经知道了如何以 jsx 的形式使用React-Router，以及如何构造 嵌套路由，在这篇文章中，我准备就如何以 编程 的方式使用React-Router来讲解，这也是在实际开发中经常会使用到的方式，废话不多说，开搞！

ppx2.jpg

通过props使用React-Router

顾名思义，在我们所写的react组件中，我们可以通过 props 来使用React-Router暴露给我们的对象，列举如下：

  • history: 历史对象，主要用于控制页面的跳转，包含如下方法
    • go: 页面的前进回退，使用方式为 this.props.history.go(n)
    • goBack: 页面回退
    • goForward: 页面前进
    • length: 历史记录栈的长度
    • location: location对象，用于获取当前路由相关信息
    • push: 跳转页面，会在历史记录栈中新增一条记录，使用方式大致分为两种：
      • this.props.history.push('/index')
      • this.props.history.push({pathname:'/index',state:{name:'carl'}})
    • replace: 跳转页面，会替换当前活动的历史记录，不会在历史记录栈中新增一条记录，使用方式同push
  • location: 主要用于获取当前路由信息，与 history 里的 location 是同一个，包含如下属性：
    • hash: url的hash值
    • pathname: url实际展示的路径
    • search: url的查询参数
    • state: url对应的state对象
  • match: 路由匹配对象，用于获取路径参数，包含如下属性：
    • isExact: 当前路由是否是精确匹配
    • params: 包含的路径参数对象
    • path: jsx中 route 配置的path值
    • url: url实际展示的路径

上述api基本涵盖了我们开发会遇到的场景，但随着 hook 的出现，react相关生态的库也都在hook化，React-Router也不例外，下面来看下它提供了哪些hook吧~

qidai.jpeg

通过hook使用React-Router

React-Router主要提供了如下几个hook

  • useHistory: 是 this.props.history 的hook变体，用法完全一致
  • useRouteMatch: 是 this.props.match 的hook变体，用法完全一致
  • useLocation: 是 this.props.location 的hook变体，用法完全一致
  • useParams: 用于获取路径参数对象

上述hook都是为了更方便我们获取路由信息而出现的，使用上完全与props的形式一致，因此就不赘述了

结语

React-Router是构建react应用路由的基石，同时它的学习上手难度也不高，因此一定要花时间去掌握，这样才能开发出高可用的react应用，好啦，就到这吧，下回见~

avatar
文章
阅读
粉丝