嵌套组件中的访问历史记录 [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)
        })
      }
    }
    ,
    ...
  ]
};

routes/ticketing/containers/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