javascript - 异步 IndexRoute 不加载 react 路由器

标签 javascript react-router

我无法加载我的索引路由(主页组件),非常感谢有关我做错了什么的帮助?

我的routes.js 文件如下所示

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)
      })
    }}
/>

我的 Container.js 文件如下所示

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} />

最佳答案

如果您使用 getChildRoutesgetIndexRoute 处理程序,则应使用 PlainRoute配置对象,而不是 JSX 组件。

关于javascript - 异步 IndexRoute 不加载 react 路由器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35273829/

相关文章:

javascript - react 私有(private)路由无限渲染 - 获取错误错误 : Maximum update depth exceeded

javascript - 使用 AJAX 在 PHP 文件中调用函数,并使用特定于数据库中记录的 ID 来更新记录

Javascript 链式规则,返回特定值而不是 [Object object] [x]

javascript - 多个 DropDownLists - 使用 ID 调用单个函数

javascript - 使用数组声明路由

javascript - 使用 React Router 4 和哈希路由获取页面位置

javascript - 将来自 angularjs 范围的数据附加到 div 中

javascript - 无法通过其 ID 访问轮播

javascript - 为什么 React Router 会导致我的组件重新挂载,而不仅仅是重新渲染?

javascript - React Context 不渲染组件