如何解决 TypeError：无法读取未定义的属性（读取“推送”）？答案

【问题标题】：How to resolve TypeError: Cannot read properties of undefined (reading 'push')?如何解决 TypeError：无法读取未定义的属性（读取“推送”）？
【发布时间】：2021-11-25 02:11:09
【问题描述】：

当我的按钮被点击时，尝试让我的按钮路由到一个新组件时遇到问题。我已经阅读了反应路由器文档并经历了堆栈溢出，并认为我会尝试将this.props.history.push("/") 放在我的handleClick() 中，但是当我单击按钮时，我会收到一个读取“推送”类型的错误。我还在路由器文档中尝试了有关导入 { withRouter } 的另一种解决方案，但这似乎也不起作用。

App.js：

    import React, {Component} from "react"
    import fbook from "./image/fbook.png"
    import roller from "./image/roller2.png"
    import tweet from "./image/tweet.png"
    import insta from "./image/insta.png"
    import Buy from "./Shop.js"
    import Test from "./Store.js"
    import { BrowserRouter as Route, Router, Link, withRouter  } from "react-router-dom";
    
    
    /*function Yup() {
      const [navigate] = useNavigate()
      return (
        <Router>
          <Switch>
            <Route exact path="/" component={Test} />
          </Switch>
        </Router>
      );
    }*/
    
    class App extends Component {
      constructor(props) {
        super(props)
        this.state = {
          isNewWindow: false,
          values: [
            {id: 1, name: 'Specs'},
            {id: 2, name: 'Designs'},
            {id: 3, name: 'Shops'},
            {id: 4, name: 'Warranty'},
          ]
        }
    this.handleChange = this.handleChange.bind(this)
    this.handleClick = this.handleClick.bind(this)
    this.closeWindowPortal = this.closeWindowPortal.bind(this)

  

    }
    
      
    
      componentDidMount() {
        window.addEventListener('beforeunload', () => {
          this.closeWindowPortal();
        });
      }

    handleChange(event) {
    const {name, value} = event.target

    this.setState({ [name]: value })
  

    }
    
      handleClick() {
        this.props.history.push("/");  
      }
    
      closeWindowPortal() {
        this.setState({ isNewWindow: false })
      }
    
      
    
      render() {
        let optionTemplate = this.state.values.map(v => (
          <option value={v.id}>{v.name}

</option>
    ));

   
   

    return (
      
      <body>
        <header>
          <h2>GAMING</h2>
          <div className="nav">
            <a href="#">STUFF</a>
            <a href="#">DESIGNS</a>
            <a href="#">MODS</a>
            <a href="#">GRIPS</a>
          </div>

          <div className="drop">
            <label>
              <div id="menu">
                MENU
              </div>

              <select className="box" value={this.state.value} onChange={this.handleChange}>
                {optionTemplate}
              </select>
            </label>

          </div>
        </header>

        <img src={roller} className="roller" alt="controller" />

        <div className="container">

          <h1>ONLY FOR THE PROS</h1><hr/>
          <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            
            <button onClick={this.handleClick}>ORDER NOW</button>
            
            <Route path="/" component={Test} />
                
              
            

            
            

          {this.state.isNewWindow && (
            <Buy closeWindowPortal = {this.closeWindowPortal} >
              <Test />
             <button onClick={this.closeWindowPortal}></button>
            </Buy>
          )}

        </div> 
          

        
            <footer>
              <div className="socials">
                <img src={insta} className="insta" alt="Instagram" />
                <img src={tweet} className="tweet" alt="Twitter"/>
                <img src={fbook} className="fbook" alt="Facebook"/>
              </div>

              <p>© 2021, Designed by A.H. </p>
            </footer> 
      </body>
      
    );
  }
}

export default App;

Index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';





ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

【问题讨论】：

对于初学者，您正在导入 BrowserRouter 并将其重命名为 Route，并导入根 Router，所以这对您没有帮助。你能验证你安装了哪个版本的react-router-dom？在您的项目目录中，运行 npm list react-router react-router-dom。
当前运行版本：(react-router-dom@6.0.2) 和 (react-router@6.0.2)
RRDv6 不再导出withRouter HOC，也不再注入路由道具或直接使用history 对象。使用 useNavigate 钩子转换为函数组件。
非常感谢您的帮助。

标签： reactjs react-router event-handling

【解决方案1】：

您没有为您的<App /> 组件提供任何道具，因此this.props.history 未定义。在您的代码中，您实际上没有连接 react 路由器或任何其他可以为您的 <App /> 组件提供 history 属性的东西。

您要么需要使用 react 路由器提供的 HoC 包装您的组件，要么利用它们的钩子做同样的事情（尽管要使用钩子，您需要从类组件转换为函数组件）。

【讨论】：

如果我要查看 react router-docs 我会在哪里寻找解决方案？我已经多次阅读文档。感谢您的帮助。