Wie Requisiten an ein Kind übergeben React Component?

Question

gegeben:

App.jsx> Welcome.js> WorkPlacePage.js

Wie kann ich Requisiten WorkPlacePage.js geben, so dass in WorkPlacePage.js, was ich tun kann: this.props.history.push()

I‘ Ich versuche, jetzt Requisiten zu übergeben, aber wenn ich console.log schreibe, wird der Verlauf in der Konsole als undefiniert ausgegeben. Danke für Ihre Hilfe!

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 ed - **

"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

Es gibt eine von exportiert Push-Funktion reagieren-Router-redux.

Sie können eine Aktion Schöpfer, in dem Sie schreiben Push-Funktion wie folgt aufrufen können:

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

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

Auf Schaltfläche klicken, Versand nur diese goTo Aktion. Es wird Geschichte allein behandeln.

Bitte denken Sie daran, diese Zeilen beim Erstellen des Geschäfts hinzuzufügen.

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

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

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

Ich hoffe, es hilft.