React之编程式导航withRouter

编程式导航 withRouter

用途：

1.非路由组件获取this.props

• 路由组件 (经过路由匹配渲染的组件) 可以直接获取这些属性，而非路由组件就必须通过withRouter修饰后才能获取这些属性了

• 非路由组件需要路由参数时，使用withRouter给此组件传入路由参数，可以将react-router 的 history、location、match 三个对象传入不是通过路由切换过来的组件的props对象上，使得被修饰的组件可以从属性中获取history,location,match

• 默认情况下只有经过路由匹配渲染的组件才存在this.props，拥有路由参数，从而才能使用编程式导航的写法*

• 执行this.props.history.push(’/detail’)跳转到目标页,即对应路由的页面，
  跳转传参: push()可以接收一个对象参数,跳转之后,通过this.props.location.state接收

• 执行this.props.history.goBack方法会返回上一历史记录

使用步骤

1.引入withRouter

import { withRouter } from 'react-router-dom'

2.要保证withRouter在最外层

class Frame extends Component {

  // 点击 <Menu.Item>标签，Menu触发οnclick=clickHandeler()事件,结构参数key
  // 用key替换掉原有路径
  clickHandeler = ({ key}) => {
    console.log({key})
    console.log(this.props)
    this.props.history.push(key)
  }
  render () {
      
  }
}
// 装饰者设计模式
export default withRouter (Frame)

2.数据更新。

• redux的的connect()或者mobx的inject()的组件中，如果依赖于路由的更新，就会要重新渲染。这时会出现路由更新了但是组件没有重新渲染的情况。因为redux和mobx方法会修改组件的shouldComponentUpdate。

• withRouter解决更新问题的时候，要保证withRouter在最外层，比如withRouter(connect(Component))

使用案例

app.js这个组件，一般是首页，不是通过路由跳转过来的，而是直接从浏览器中输入地址打开的，如果不使用withRouter，此组件的this.props为空，没法执行props中的history、location、match等方法。

比如

App组件就可以直接获取路由中这些属性了，但是，如果App组件中如果有一个子组件Foo，那么Foo就不能直接获取路由中的属性了，必须通过withRouter修饰后才能获取到。