React-router：getChildRoutes 没有在嵌套的 PlainRoute 中触发答案

【问题标题】：React-router: getChildRoutes not firing in nested PlainRouteReact-router：getChildRoutes 没有在嵌套的 PlainRoute 中触发
【发布时间】：2016-09-06 02:51:05
【问题描述】：

作为参考，我使用 React-Redux Starter Kit (https://github.com/davezuko/react-redux-starter-kit) 作为基础项目布局。

我有一个名为TSP 的路由，我正在使用getComponent 和redux connect() 在容器组件上注入reducer，我希望它将children 在道具中传递。

TSP 路由定义中的getChildRoutes 永远不会被调用。

根路由器配置：

import ApplicationLayout from '../layouts/ApplicationLayout';
import Home from './Home';

export const createRoutes = (store) => {
  const routes = {
    path: '/',
    component: ApplicationLayout,
    indexRoute: Home,
    getChildRoutes (location, next) {
      require.ensure([], (require) => {
        next(null, [
          require('./TSP').default(store),
          require('./Home').default,
        ]);
      });
    }
  };

  return routes;
};

export default createRoutes;

嵌套路由器配置 (TSP)：

import { injectReducer } from '../../store/reducers';
import Overview from './routes/Overview';

export default (store) => ({
  path: '/tsp/:id',
  indexRoute: Overview,
  getComponent (nextState, next) {
    require.ensure([
      './containers/TSPContainer',
      './modules/tsp'
    ], (require) => {
      const TSP = require('./containers/TSPContainer').default;
      const reducer = require('./modules/tsp').default;

      injectReducer(store, { key: 'tsp', reducer });
      next(null, TSP);
    });
  },
  getChildRoutes (location, next) {
    debugger
    require.ensure([], (require) => {
      next(null, [
        // Provide store for async reducers and middleware
        require('./routes/Offers').default(store),
        require('./routes/Reviews').default(store)
      ]);
    });
  }
});

我永远无法到达getChildRoutes 中的debugger。

感谢任何帮助，如果有更多需要查看的文件，我可以添加它们。

【问题讨论】：

标签： reactjs react-router react-redux react-router-redux

【解决方案1】：

您是否同步加载了./TSP 和./Home 路由定义？如果没有，我认为如果您不将这些模块指定为依赖项，require.ensure 将无法工作。

所以：

getChildRoutes (location, next) {
  require.ensure([
    './TSP',
    './Home'
  ], (require) => {
    next(null, [
      require('./TSP').default(store),
      require('./Home').default,
    ]);
  });
}

【讨论】：

试过了.. 没有骰子。 Home 路由加载正常，顶级 TSP 路由也是如此。但是当 TSP 加载时，它没有调用 getChildRoutes 方法，因此当我在 TSP 构造函数中查找 this.props.children 时，它无处可寻

【解决方案2】：

想通了。我在上面的 TSP 嵌套路由器配置中的 IndexRoute 是一个函数，而不是一个对象（我假设 react-router 在触发 getChildRoutes 之前期望 indexRoute 是一个对象。）

解决方案是将 Overview 的已解析 routeConfig 分配给 indexRoute。

TSP/index.js

import { injectReducer } from '../../store/reducers';

export default (store) => ({
  path: '/tsp/:id',
  indexRoute: require('./routes/Overview').default(store),
  getComponent (nextState, next) {
    require.ensure([
      './containers/TSPContainer',
      './modules/tsp'
    ], (require) => {
      const TSP = require('./containers/TSPContainer').default;
      const reducer = require('./modules/tsp').default;

      injectReducer(store, { key: 'tsp', reducer });
      next(null, TSP);
    });
  },
  getChildRoutes (location, next) {
    require.ensure([], (require) => {
      next(null, [
        // Provide store for async reducers and middleware
        require('./routes/Offers').default(store),
        require('./routes/Reviews').default(store)
      ]);
    });
  }
});

TSP/routes/Overview/index.js

export default (store) => ({
  getComponent (nextState, next) {
    require.ensure([
      './components/OverviewView'
    ], (require) => {
      const Overview = require('./components/OverviewView').default;
      next(null, Overview);
    });
  }
});

【讨论】：