React---路由跳转

Posted 2020-12-02 zjknb

最近在开发react的项目中，很多地方都是使用组件式的跳转方式，但是怎么样使用js去控制页面的跳转呢？

withRouter

withRouter 是一个高阶组件，把 match，location，history 三个对象注入到组件的 props 中。这是一个非常实用的函数，下面以四个小例子阐述它的用法。

1.与 redux 的 connect 配合

在项目中使用了 redux 来管理数据，当数据没有变化时，组件也就不会重新渲染。假设在组件中某个 Route 组件并未被渲染，数据也未发生变化，即便当前页面的链接发生了变化，也不会有任何的路由匹配该链接。因为这时候 Route 组件还是未被渲染！如何知道链接变化了呢？这时候就需要 withRouter 了。

import { withRouter } from ‘react-router-dom‘
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Component))

2.页面的跳转

React Router 提供了 Link，NavLink 与 Redirect 组件来控制页面的跳转。但是我在一个 Button 的点击事件中控制页面的跳转，这几个组件就无法使用了。这里，或许你会想到使用 location 对象。

// 错误的方式!!!
location.href = ‘/article‘　　

这种方式可行，但不正确。如果先前使用的 BrowserRouter 变成 HashRouter 的话，这种方式就失效了。withRouter 封装的组件中的 props 包含 history，通过 history 对象来控制页面的跳转。history 对象有 push，replace 与 go 等方法，调用这些方式实现页面的跳转。

class Comoponent extends React.Component {
  handleClick () {
    this.props.history.push(‘/article‘)
  }
}
export default withRouter(Component)