Как получить доступ к this.props.location в дочернем компоненте?

Question

Я новичок в React, поэтому, пожалуйста, не сердитесь на меня.У меня есть дочерний компонент <BottomSlider />, и я не могу получить доступ к this.props.location.Я пытался утешить this.props, и он показывает только магазин, но в родительском компоненте он показывает history, location , store , match.Как я могу передать реквизиты местоположения моему <BottomSlider> компоненту?

родительский компонент

export default class Worklist extends Component<IProps> {
  public render() {
    console.log(this.props)
    return (
      <>
        <BottomSlider />
      </>
    )
  }
}

и дочерний компонент

export default class BottomSlider extends Component<IProps> {
  public render() {
    // const { pathname } = this.props.location
    const { Modal } = this.props.store
    const { BuildingData } = this.props.store
    console.log("==============")
    console.log("test", this.props)

    return (
      <div
        className={`bottom-slider ${
          pathname !== "/worklist-dynamic"
            ? "bottom__slider-hide"
            : "bottom__slider-align"
        }`}
      >
        <div
          className={`bottom__slider ${
            pathname === "/worklist-dynamic" ? "bottom__slider-align" : "" // todo add visibility
          }`}
        >
      <div className="building_name">
        <p className="building_name-text">test</p>
      </div>
        </div>
      </div>
    )
  }
}

Answer 1

Если вы используете реагирующий маршрутизатор v4, вы можете добавить withRouter из response-router-dom в дочернем компоненте, чтобы получить доступ к расположению в дочернем компоненте, как показано ниже:

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

export default withRouter(BottomSlider)