Question

我正在尝试使用React Router Async API来实现一些代码拆分。

我目前有一个主路径文件和一个子路由：

// routes/index.js
export const createRoutes = (store) => ({
  path: '/',
  component: AppView,
  indexRoute: {
    onEnter: (nextState, transition) => {
      transition('/login')
    },
  },
  childRoutes: [
    LoginRoute(store),
  ]
})

然后我的登录路线如下：

//routes/Login/index.js
export default (store) => ({
  path: 'login',
  /*  Async getComponent is only invoked when route matches   */
  getComponent (nextState, cb) {
    /*  Webpack - use 'require.ensure' to create a split point
        and embed an async module loader (jsonp) when bundling   */
    require.ensure([], (require) => {
      /*  Webpack - use require callback to define
          dependencies for bundling   */
      const requireUnauthentication = require('containers/UnauthenticatedComponent').default;
      const LoginModalContainer = require('components/Login/LoginModalContainer').default;

      /*  Return getComponent   */
      cb(null, requireUnauthentication(LoginModalContainer))

    /* Webpack named bundle   */
  }, 'login')
  },
  indexRoute: {
    getComponent(nextState, cb){
      require.ensure([], (require) => {
        const LoginStart = require('components/Login/LoginStart').default;
        cb(null, LoginStart);
      }, 'login')
    }
  },
  getChildRoutes: (location, cb) => {
    require.ensure([], (require) => {
      const routes = [
        { path: 'login-start', component: require('components/Login/LoginStart').default },
        { path: 'login-prompt', component: require('containers/LoginContainer').default },
        { path: 'phone-number', component: require('components/Register/PhonenumberSet').default }
      ];
      cb(null, routes);
    }, 'login');
  }
})

问题是直接导航到/ login我遇到错误：

DOMLazyTree.js：62 Uncaught TypeError：无法读取属性＆＃39; replaceChild＆＃39;为null

ReactDOMComponentTree.js：105 Uncaught TypeError：无法读取属性＆＃39; __ reactInternalInstance $ nva6m7qemb9ackp2ti2ro1or＆＃39;为null

我认为这与异步路由配置有关，因为一旦我改变了某些内容并且热重新加载，一切都会很好地加载。

React Router Async Routes和Webpack

0 个答案: