Ally February 2016

Async IndexRoute doesn't load with react-router

I can't get my index route (Home component) to load, would really appreciate some help as to what I'm doing wrong?

My routes.js file looks like this

module.exports = <Route 
    path="/" 
    getComponent={(location, cb) => {
      require.ensure([], (require) => {
        cb(null, require('./Container'))
      })
    }}
    getChildRoutes={(location, cb) => {
      require.ensure([], (require) => {
        cb(null, require('./Container').childRoutes)
      })
    }}
    getIndexRoute={(location, cb) => {
      require.ensure([], (require) => {
        cb(null, require('./Container').indexRoute)
      })
    }}
/>

and my Container.js file looks like this

export default class Container extends Component {
  render = () => {
    return <div>
      {this.props.children}
    </div>
  }
}

Container.childRoutes = [
  <Route 
    path="/:product/get-quote"
    component={props => <Product productName={props.params.product} {...props} />}
  />,
  <Route 
    path="/:product/processing-quote"
    component={props => <ProcessingQuote productName={props.params.product} {...props} />}
  />
]

Container.indexRoute = <IndexRoute component={Home} />

Answers


taion February 2016

If you're using the getChildRoutes and getIndexRoute handlers, you should use PlainRoute configuration objects, rather than the JSX components.

Post Status

Asked in February 2016
Viewed 3,454 times
Voted 11
Answered 1 times

Search




Leave an answer