Probleme beim Navigieren zu einer anderen Komponente (und Seite) beim Klicken mit 'this.props.router.push'

Question

Ich möchte zu einer anderen Seite navigieren, wenn auf ein Bild in einer separaten Komponente geklickt wird. Die Verwendung von this.props.router.push sollte funktionieren, um dies zu erreichen. Allerdings bekomme ich diesen Fehler, wenn auf das Bild geklickt wird Uncaught TypeError: Cannot read property 'props' of null. Dies ist die Komponente Ich habe das Bild, das die auf Klick-Funktion hat:

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> 
     ); 
    } 
} 

Das ist mein productpage.js, die die ProductPage Komponente hat:

import React, { Component } from 'react'; 

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

} 

Warum ich mich diesen Fehler? Ist das der beste Weg zu tun, was ich will?

Answer 1

Sie müssen dies Ihre goProductPage Methode in Konstruktor binden:

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