上节课我们简单介绍了一下编程式路由导航，灵活运用编程式路由导航是可以实现很多高级交互的。大家也要多研究一下。这节课我们来学习关于withRouter的用法

回顾

在开始这节课之前，我们来简单地回顾一下上节课的要点

  • 编程式路由导航就是编写一段代码来完成路由的跳转
  • 编程是路由导航借助的就是路由组件所接收到的props中history属性自身的API

以上便是上节课的主要要点，接下来我们开始这节课的内容。

需求效果

我们还记不记得我们上节课开篇的时候提到了一个小需求？当我们打开页面是自动跳转到/home/news的。然后我们要求，当页面News展示了 3 秒之后，自动跳转到Message。那么我们怎么实现？

需求分析

首先我们是不是要求News一挂载就开始计算？那么我们是不是要用到componentDidMount钩子？在钩子里设置一个定时器？延迟3秒之后直接跳转到Message。那么怎么跳转？News组件是不是路由组件？那么直接push或者replace都行，而且往Message也没有参数，把路径传进去就好了。

需求实现

那么我们来代码实现一下：

export default class News extends Component {
  componentDidMount() {
    setTimeout(
      () => this.props.history.push("/home/message"), 3000
    );
  }
  render() {
    return (
      <ul>
        <li>news001</li>
        <li>news002</li>
        <li>news003</li>
      </ul>
    )
  }
}

我们使用setTimeout函数来实现延迟 3 秒执行效果。然后执行器函数直接push到/home/message路径上。我的当前环境截不了动图，这个效果大家自己试一下，我这里就不演示了。

以上就是我们上节课的开篇的需求。

什么是withRouter

我们现在有这么一个需求，我们要在页面头部加两个按钮，前进和后退。那么我们建一个组件Header里面用来装我们的大标题和我们的两个按钮，我们来看一下：

export default class Header extends Component {
  render() {
    return (
      <div>
        <div className="page-header">
          <h2>React Router Demo</h2>&nbsp;
          <button onClick={this.back}>back</button>&nbsp;
          <button onClick={this.forward}>forward</button>
        </div>
      </div>
    )
  }
}

目前只有基本元素，里面虽然绑定了onClick事件，但是并没有定义相应的回电方法。因为我们这里是一般组件啊，这个组件是没有路由来管理他的，既然是一般组件我们肯定就没有我们所说的props中的那三大属性。那么我们的回调应该怎么写呢？

这个时候我们就要用withRouter了。

withRouter是一个函数，作用就是能够让一般组件也能够像路由组件使用路由特有的API。

withRouter的用法

那么我们已经知道withRouter是干什么用的了，那么我们怎么用？既然这是函数那么我们是不是得调用？调用的时候传参是什么呢？withRouter这个函数，可以接收一个组件，然后在这个组件上加上路由组件特有的那三个属性。

class Header extends Component {
  render() {
    return (...)
  }
  back = () => {
    this.props.history.goBack();
  }
  forward = () => {
    this.props.history.goForward();
  }
}

export default withRouter(Header)

我们有没有注意到我们的写法和之前不一样了？我们之前直接在定义组件的时候就直接导出了，但是这次我们定义组件之后，在结尾我们导出withRouter然后还把我们定义的组件传给了这个函数。

这是什么意思？首先我们来看，这是不是导出了withRouter函数的返回值啊？withRouter函数做得事儿其实就是给传进去的组件加了路由组件特有的属性然后再把组件返回出来。所以说这个时候导出的还是Header组件，但是这个时候Header组件已经有了路由组件特有的那几个属性了。

然后我们还定义了onClick的回调方法，那么这次我们看一下结果吧：

image-20220117165748745

我们打开页面之后是在/home/news，然后我点了About，然后又点了Home，然后点了Message，最后点了message001。那么我们点一下后退：

image-20220117170125846

这次直接回到了/home/message那么我们再点击两次后退：

image-20220117170226300

这次会到了About。那么我们来试试前进行不行吧：

image-20220117170303223

也可以成功前进。

以上便是关于withRouter的使用

总结

  • withRouter是一个使一般组件可以具备路由组件的API的函数
  • withRouter接收一个组件并返回一个与之前组件同名的新组件

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/use_with_router/