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

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

通过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吧~

通过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应用，好啦，就到这吧，下回见~