'this.props.router.push'を使用してクリックしたときに別のコンポーネント（およびページ）に移動する際の問題

Question

画像を別のコンポーネントでクリックしたときに別のページに移動します。これを達成するにはthis.props.router.pushを使用する必要があります。しかし、画像をクリックするとこのエラーが発生しますUncaught TypeError: Cannot read property 'props' of null。これは私がクリック機能の持つイメージを持っているコンポーネントです。

import React, { Component } from 'react'; 

export default class ProductPage extends Component { 
    render() { 
     return (
      <div className= "ProductPage" id="ProductPage"> 
      </div> 
     ); 
    } 

} 

私はこのエラーをIを取得しています理由：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { addCart } from '../../actions'; 
import { withRouter } from 'react-router'; 
import ProductPage from ' 


import Shirt from './camodye.jpeg'; 
import Tape from './Tape.png'; 
import RegularHat from './regularhat.jpg'; 


export class WebShop extends Component { 
    constructor(props){ 
     super(props); 
     this.state = {value: 'medium', cartData: {} }; 
     this.handleClick = this.handleClick.bind(this); 
     this.change = this.change.bind(this); 
    } 

    handleClick() { 
     let cart = {price:0,item:"userselection",size:this.state.value}; 
     this.props.onCartAdd(cart); 
    } 

    change(e){ 
     this.setState({value: e.target.value}) 
    } 

    itemSelection(){ 
     let userOrder = {price:0,item:"",size:""}; 
     let userItem = ""; 
     if (userItem == "shirt1") { 
      let itemPrice = 20.00; 
     } 
    } 

    goProductPage() { 
     this.props.router.push({ProductPage}); 
    } 


    render() { 
     console.log('aa'); 
     return (
      <div className='Webshop' id='Webshop'> 
       <ul id="Productlist"> 
        <div className='Product'> 
         <img src={Shirt} onClick={this.goProductPage}></img> 
         <button onClick={this.handleClick} className="addit">Add to cart</button> 
         <select id="size" onChange={this.change} value={this.state.value}> 
         <option value="medium">Medium</option> 
         <option value="large">Large</option> 
         <option value="x-large">X-large</option> 
         </select> 
        </div> 
        <div className='Product'> 
         <img src={RegularHat}></img> 
         <button onClick={this.handleClick} className="addit">Add to cart</button> 
         <select id="size" onChange={this.change} value={this.state.value}> 
         <option value="medium">Medium</option> 
         <option value="large">Large</option> 
         <option value="x-large">X-large</option> 
         </select> 
        </div> 
        <div className='Product'> 
         <img src={Tape}></img> 
         <button onClick={this.handleClick} className="addit">Add to cart</button> 
         <select id="size" onChange={this.change} value={this.state.value}> 
         <option value="medium">Medium</option> 
         <option value="large">Large</option> 
         <option value="x-large">X-large</option> 
         </select> 
        </div> 
       </ul> 
      </div> 
     ); 
    } 
} 

これはProductPage成分を持っている私のproductpage.jsのですか？これは私が欲しいことをする最善の方法ですか？

Answer 1

あなたは、コンストラクタであなたのgoProductPageメソッドにこれをバインドする必要があります。

constructor(props){ 
    super(props); 
    this.goProductPage = this.goProductPage.bind(this); 
}