Как решить "TypeError: Невозможно прочитать свойство 'push' of undefined" в реакции-маршрутизаторе?

Question

1.В компоненте article-List я передаю «историю» дочернему компоненту article-cell:

2. В дочернем компоненте (article-cell) я использую history.push, но произошла ошибка. this.props.history.push (/detail/${this.props.data._id}, {id: this.props.data_id});

   return(
            <div>

                {
                    items.map((item,index) => (
                        <ArticleListCell history={this.props.history} key={index} data={item} tags={tags} />
                    ))
                }



            </div>

 return(
            <div className="ac_container" onClick={
                () => {
                    this.props.history.push(`/detail/${this.props.data._id}`, {id: this.props.data_id});
                    // props.getArticleDetail(props.data_id)
                    // this.props.his
                }
              }
            >

TypeError: Cannot read property 'push' of undefined
onClick
C:/Users/Lee/Documents/Repos/ReactExpressBlog/src/components/ArticleListCell/ArticleListCell.js:18
  15 | return(
  16 |     <div className="ac_container" onClick={
  17 |         () => {
> 18 |             this.props.history.push(`/detail/${this.props.data._id}`, {id: this.props.data_id});
     | ^  19 |             // props.getArticleDetail(props.data_id)
  20 |             // this.props.his
  21 |         }
View compiled、

Answer 1

Нет необходимости отправлять историю в качестве реквизитов дочернему компоненту, по умолчанию act-router-dom предоставляет withRouter для получения history объекта в функциональном компоненте. см. пример ниже

import React from 'react'
import { withRouter } from 'react-router-dom';
function Test(props) {
    const { match, location, history } = props;
    const handleClick = () => {
        history.push('/home')
    }
    return (
        <div>
            <button onClick={handleClick}>redirect</button>
        </div>
    )
}

export default withRouter(Test);

см. Пример с демонстрационным кодом здесь