子どもに小道具を渡すにはどうすればいいですか？

Question

は、与えられた：

App.jsx> Welcome.js> WorkPlacePage.js方法WorkPlacePage.jsで、私が行うことができるように、私はWorkPlacePage.jsに小道具を渡すん

：私は「this.props.history.push()

を今は小道具を渡そうとしていますが、console.logでは、履歴がコンソールに未定義として出力されています。ご協力ありがとうございました！

App.jsx：

import Welcome from '../containers/welcome/Welcome'; 

const App = ({store}) => { 
    return (
    <StoreProvider store={store}> 
     <ConnectedRouter history={history}> 
     <Switch> 
      <PrivateRoute exact path="/welcome" layout={MainLayout} component={Welcome} /> 
      <WithMainLayout exact path="/" component={Home} /> 
      <AuthRoutes path={`/${clientResourceName}`} wrapper={WithMainLayout} /> 
      <WithMainLayout component={NotFound} /> 
     </Switch> 
     </ConnectedRouter> 
    </StoreProvider> 
); 
}; 

Welcome.js

import React from 'react'; 
import WorkPlacePage from '../../components/welcome/WorkPlacePage'; 

class Welcome extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     step: 1 
    }; 
    } 

    showStep() { 
    const {history} = this.props 

    console.log('showStep'); 
    console.log({history}) 

    switch (this.state.step) { 
     case 1: 
     return <WorkPlacePage history={history} /> 
     default: 
     return (
      <div> 
      <h1>Case: Default</h1> 
      </div> 
     ); 
    } 
    } 

    render() { 
    var style = { 
     width : (this.state.step/4 * 100) + '%' 
    } 
    return (
     <main> 
     <span className="progress-step">Step {this.state.step}</span> 
     <progress className="progress" style={style}></progress> 
     {this.showStep()} 
     </main> 
    ) 
    } 
} 

export default Welcome; 

WorkPlacePage.js

import React from 'react'; 
import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 

class WorkPlacePage extends React.Component { 

    render() { 

    console.log('this.props.history') 
    console.log(this.props.history) 

    return (
     <div> 
     <h1>Workplace</h1> 
     <span> 
     survey things 
     <button onClick={() => this.props.history.push("/confirmation")}>next page</button> 
     </span> 
     </div> 
    ); 
    } 
} 

export default WorkPlacePage; 

** UPDAT編 - **

"react": "^15.5.4", 
"react-apollo": "^1.1.2", 
"react-devise": "^0.0.6", 
"react-devise-material-ui": "^0.0.1", 
"react-dom": "^15.5.4", 
"react-redux": "^5.0.4", 
"react-router-dom": "^4.1.1", 
"react-router-redux": "^5.0.0-alpha.6", 

Answer 1

反応 - ルータ - Reduxのによってエクスポートプッシュ機能があります。ちょうどこの後藤アクションを派遣、ボタンクリックで

import { push } from 'react-router-redux' 

function goTo(pathname) { 
    push({ pathname }) 
} 

：

は、あなたがこのようにプッシュ機能を呼び出すことが可能なアクションの作成者を書くことができます。独自の履歴を処理します。

店舗の作成中にこれらの行を追加することを忘れないでください。

import { routerMiddleware } from 'react-router-redux' 
import { browserHistory } from 'react-router' 

const middleware = applyMiddleware(
    ... 
    routerMiddleware(browserHistory), 
); 

const store = createStore(
    ... 
    applyMiddleware(middleware) 
) 

希望します。