React-router: getChildRoutes не срабатывает во вложенном PlainRoute

Для справки: я использую стартовый комплект React-Redux (https://github.com/davezuko/react-redux-starter-kit) в качестве базового макета проекта.

У меня есть маршрут с именем TSP, и я использую getComponent и redux connect(), чтобы внедрить редуктор в компонент контейнера, который, я надеюсь, передаст children в реквизитах.

getChildRoutes в определении маршрута TSP никогда не вызывается.

Конфигурация корневого маршрутизатора:

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)
      ]);
    });
  }
});

Я никогда не доберусь до debugger внутри getChildRoutes.

Любая помощь приветствуется, и если есть еще файлы, которые необходимо увидеть, я могу их добавить.


reactjs react-redux react-router react-router-redux
person chrsmllr    schedule 10.05.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы синхронно загрузили определения маршрутов ./TSP и ./Home? Если нет, я не думаю, что require.ensure будет работать без указания этих модулей в качестве зависимостей.

So:

getChildRoutes (location, next) {
  require.ensure([
    './TSP',
    './Home'
  ], (require) => {
    next(null, [
      require('./TSP').default(store),
      require('./Home').default,
    ]);
  });
}
person Clark Pan    schedule 11.05.2016
comment
Пробовал.. Нет кости. Маршрут Home загружается нормально, как и маршрут TSP верхнего уровня.. но когда TSP загружается, он не вызывает метод getChildRoutes, поэтому, когда я ищу this.props.children в конструкторе TSP, его нигде не найти - person chrsmllr; 11.05.2016

arrow_upward
0
arrow_downward

Догадаться. Мой IndexRoute в приведенной выше конфигурации вложенного маршрутизатора TSP был функцией, а не объектом (я предполагаю, что реагирующий маршрутизатор ожидал, что indexRoute будет объектом перед запуском getChildRoutes.)

Решение состояло в том, чтобы назначить разрешенный routeConfig для Overview на 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);
    });
  }
});
person chrsmllr    schedule 11.05.2016