使用“ this.props.router.push”單擊導航到另一個組件（和頁面）時出現問題

Question

當在單獨的組件中單擊圖像時，我想導航到另一個頁面。 使用this.props.router.push應該可以實現這一目標。 但是，單擊圖像時出現此錯誤Uncaught TypeError: Cannot read property 'props' of null 。 這是我具有單擊功能的圖像的組件：

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.js具有ProductPage組件：

import React, { Component } from 'react';

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

}

為什么我會收到此錯誤？ 這是做我想要的最好的方法嗎？

Answer 1

您需要將此綁定到構造函數中的goProductPage方法：

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