ネストされたコンポーネントのアクセス履歴[ReactJS]

Question

私はテンプレートから構築しているReactJSアプリケーションを持っています。私は反応に慣れていない、コンポーネントにこのパターンがどのようにロードされているのはもちろんです。

入れ子コンポーネントルート内からhistoryにアクセスするにはどうすればよいですか？

app.js

const routes = { 
    path: '/', 
    indexRoute: { onEnter: (nextState, replace) => replace('/login') }, 
    childRoutes: [ 
    require('./routes/ticketing').default, 
    require('./routes/promotions').default, 
    ... 
    ] 
}; 

ReactDOM.render((
    <Provider store={store}> 
    <Router 
     history={history} 
     routes={routes} 
    /> 
    </Provider> 
), document.getElementById('app')); 

ルート/発券/ index.js

export default { 
    path: 'ticketing', 
    component: require('../../components/common/Layout').default, 

    indexRoute: { onEnter: (nextState, replace) => replace('/ticketing/printtickets') }, 

    childRoutes: [ 
    { 
     path: 'printtickets', 
     getComponent(nextState, cb){ 
     System.import('./containers/printtickets').then((m)=> { 
      cb(null, m.default) 
     }) 
     } 
    } 
    , 
    ... 
    ] 
}; 

ルート/発券/コンテナ/ printtickets.js

import React from 'react' 

export default class PrintTickets extends React.Component { 

    componentWillMount(){ 
    const { history } = this.props; // THIS IS NULL 
    history.replaceState(null, 'analytics/dashboard') // ERROR 
    } 

    render() { 
    return (
     <div /> 
    ) 
    } 
} 

Answer 1

ヒストリオブジェクトにアクセスするには、コンポーネントをwithRouter HOCでラップすることができます。ここで

詳細： https://reacttraining.com/react-router/web/api/withRouter

の