キャッチされない例外TypeError：プロパティを読み取ることができません未定義の「プッシュ」（リアクト - ルータ - ドム）

Question

私はBldgsに対応するタブをそれぞれ有する回転スライドとダッシュボードを、持っています。 Dashboard.jsとBldgs.jsはともにApp.jsの子です。ユーザーはAppがBldgsにするとき、それはルートタブAが表示持っているBldgs.jsを伝えることができるようにApp.jsを伝えるために必要DashboardDashboard.js内の特定のスライドA、クリック

。

私はAppまでとBldgsまでDashboardから正しいインデックス値を渡していを信じ。私は私のDashboardコンポーネントに私のhandleClick()機能を渡す開始する前に私のコードは正常に動作していた

Uncaught TypeError: Cannot read property 'push' of undefined

：しかし、エラーが述べ私App.jsファイルでスローされています。

Index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import './index.css'; 
import injectTapEventPlugin from 'react-tap-event-plugin'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import { BrowserRouter as Router } from 'react-router-dom'; 
import { hashHistory } from 'react-router'; 

// Needed for onTouchTap 
// http://stackoverflow.com/a/34015469/988941 
injectTapEventPlugin(); 

ReactDOM.render(
    <MuiThemeProvider> 
    <Router history={hashHistory}> 
     <App /> 
    </Router> 
    </MuiThemeProvider>, 
    document.getElementById('root') 
); 

App.js

import React from 'react'; 
import { Route } from 'react-router-dom'; 
import Dashboard from './Dashboard'; 
import Bldgs from './Bldgs'; 

var selectedTab; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleClick = this.handleClick.bind(this); 
    selectedTab = 0; 
    } 

    handleClick(value) { 
    selectedTab = value; 
    // console.log(selectedTab); 
    this.props.history.push('/Bldgs'); 
    // console.log(this.props); 
    } 

    render() { 
    var _this = this; 

    return (
     <div> 
     <Route exact path="/" render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} /> 
     <Route path="/Bldgs" component={Bldgs} curTab={selectedTab} /> 
     </div> 
    ); 
    } 
} 

export default App; 

Dashboard.js

import React, { Component } from 'react'; 
import './Dashboard.css'; 
import { AutoRotatingCarousel, Slide } from 'material-auto-rotating-carousel'; 
... 

var curIndex; 

class Dashboard extends Component { 
    constructor(props) { 
    super(props); 
    this.handleEnter = this.handleEnter.bind(this); 
    this.handleChange = this.handleChange.bind(this); 
    curIndex = 0; 
    } 

    handleEnter(e) { 
    // console.log(curIndex); 
    this.props.handleClick(curIndex); 
    } 

    handleChange(value) { 
    // console.log(value); 
    curIndex = value; 
    } 

... 
} 

export default Dashboard; 

Bldgs.js withRouterで使用App成分でhistoryを利用するために

... 
var curTab; 

class Bldgs extends Component { 
    constructor(props) { 
    super(props); 
    this.handleChange = this.handleChange.bind(this); 
    this.goHome = this.goHome.bind(this); 
    curTab = 0; 
    } 

    handleChange(value) { 
    this.setState({'selectedTab': value}); 
    console.log(this.state); 
    } 

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

... 
} 

export default Bldgs; 

Answer 1

。あなたのコンポーネントは、あなたが経過していないルータまたはによってレンダリングコンポーネントのネストされた子であるとき、これが例に起こるかもしれ

、あなたのコンポーネントがRouter propsを受信して​​いない場合にのみ、withRouterを利用するために必要Routerまたはルータのコンポーネントはルータにまったくリンクされず、ルートとは別のコンポーネントとしてレンダリングされます。 withRouter

Answer 2

に

import React from 'react'; 
import { Route , withRouter} from 'react-router-dom'; 
import Dashboard from './Dashboard'; 
import Bldgs from './Bldgs'; 

var selectedTab; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleClick = this.handleClick.bind(this); 
    selectedTab = 0; 
    } 

    handleClick(value) { 
    selectedTab = value; 
    // console.log(selectedTab); 
    this.props.history.push('/Bldgs'); 
    // console.log(this.props); 
    } 

    render() { 
    var _this = this; 

    return (
     <div> 
     <Route exact path="/" render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} /> 
     <Route path="/Bldgs" component={Bldgs} curTab={selectedTab} /> 
     </div> 
    ); 
    } 
} 

export default withRouter(App); 

Documentation

反応させ、ルータをV4ためのonClick = {this.fun

に関数を変更 。バインド（この）}

fun(){ 
    this.props.history.push("/Home"); 

    } 

と

import {browserHistory,withRouter} from "react-router-dom" 

export default withRouter (comp_name);