如何解決'this.props.router.push'給'未捕獲TypeError：無法讀取'未定義'錯誤的屬性'推'？

Question

我試圖讓我的反應應用程序在單擊徽標時進入新頁面。我在其他組件上的應用中完成了這項工作，但出於某種原因，當我點擊徽標時，我收到了Uncaught TypeError: Cannot read property 'push' of undefined。這是我的組件：

import React, { Component } from 'react'; 
import { Link } from 'react-router'; 
import { withRouter } from 'react-router'; 


import Logo from './nspstar.png'; 
import Logo2 from './nspred.png'; 
import HomeLogo from './HOME.png'; 
import HomeLogo2 from './HOME2.png'; 
import MusicLogo from './MUSIC.png'; 
import AboutLogo from './ABOUT.png'; 
import AboutLogo2 from './ABOUT2.png'; 
import ContactLogo from './CONTACT.png'; 
import ContactLogo2 from './CONTACT2.png'; 
import ShopLogo from './SHOP.png'; 
import ShopLogo2 from './SHOP2.png'; 

export default class Menu extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      imgSrc: Logo, 
      homeSrc: HomeLogo, 
      aboutSrc: AboutLogo, 
      shopSrc: ShopLogo, 
      contactSrc: ContactLogo 

     } 
     ... 
     this.goHomePage = this.goHomePage.bind(this); 
    } 

    goHomePage() { 
     this.props.router.push('/'); 
    } 


    ... 

    render() { 
     return (
      <div className='Menu' id='Menu'> 
       <Link to='/'><img onMouseOver={this.handleMouseOver2} onMouseOut={this.handleMouseOut2} src={this.state.homeSrc}></img></Link> <Link to='/About'><img onMouseOver={this.handleMouseOver3} onMouseOut={this.handleMouseOut3} src={this.state.aboutSrc}></img></Link> <img src={this.state.imgSrc} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onClick={this.goHomePage}></img> <Link to='/Shop'><img onMouseOver={this.handleMouseOver4} onMouseOut={this.handleMouseOut4} src={this.state.shopSrc}></img></Link> <Link to='/Cart'><img onMouseOver={this.handleMouseOver5} onMouseOut={this.handleMouseOut5} src={this.state.contactSrc}></img></Link> 
       <hr /> 
      </div> 
     ); 
    } 
} 

我打電話goHomePage() { this.props.router.push('/'); }

在<img src={this.state.imgSrc} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onClick={this.goHomePage}></img>

什麼是錯我的代碼是給我這個錯誤？

Answer 1

您可以使用歷史，而不是

goHomePage() { 
    this.props.history.push('/'); 
}