笔记react router 4（五）

　　或许，你觉得我麻烦，明明一篇文章可以搞定的内容，非要写几篇。是不是正在吐槽我？没关系，我的目的达到了。手动傲娇(￣∇￣)

然后，我们就要来聊一聊withRouter了。

我们都知道，当我在访问路由配置文件中的组件，通常我们称之为路由组件时，可以从他的props中访问到路由对象。如，location。但是，没有声明在路由中的组件，通常我们称之为非路由组件，比如路由组件中我们使用到的外部组件时，我们需要用到路由对象该怎么办呢？

在3.X中，我们要在非路由组件中使用history对象，需要手动引入history，就像这样，

import createHistory from 'history/createBrowserHistory'

const history = createHistory()

或者，我们在路由组件中将获取到的路由对象手动传递给外部组件。

<Parent>

    <Child routeProps = {this.props.location} />

</Parent>

再或者，我们可以使用H5的history API。

window.location

但是4.X中我们可以不用那么麻烦了，直接一个withRouter包裹你的外部组件，即可通过props访问到location， router及history等对象。

就像这样，

import React from 'react'

import PropTypes from 'prop-types'

import { withRouter } from 'react-router'

class ShowTheLocation extends React.Component {

  static propTypes = {

    match: PropTypes.object.isRequired,

    location: PropTypes.object.isRequired,

    history: PropTypes.object.isRequired

  }

  render() {

    const { match, location, history } = this.props

    return (

      <div>You are now at {location.pathname}</div>

    )

  }

}

const ShowTheLocationWithRouter = withRouter(ShowTheLocation)
来自：https://reacttraining.com/react-router/web/api/withRouter

　　接着再来看， component.WrappedComponent

// MyComponent.js

export default withRouter(MyComponent)

// MyComponent.test.js

import MyComponent from './MyComponent'

render(<MyComponent.WrappedComponent location={{...}} ... />)

它用于创建一个包装组件上，通常用于测试。

　　wrappedComponnetRef这个函数的作用是refs获取组件实例。

class Container extends React.Component {

  componentDidMount() {

    this.component.doSomething()

  }

  render() {

    return (

      <MyComponent wrappedComponentRef={c => this.component = c}/>

    )

  }

}

巴特西

笔记react router 4（五）

最新文章

热门文章