React-router:getChildRoutes 不会在嵌套的 PlainRoute 中触发 [英] React-router: getChildRoutes not firing in nested PlainRoute

问题描述

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

For reference, I am using the React-Redux Starter Kit (https://github.com/davezuko/react-redux-starter-kit) as a base project layout.

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

Ive got a route named TSP, and I am using getComponent and redux connect() to inject a reducer on a container component, which i am hoping will pass children on in the props.

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

The getChildRoutes in the TSP route definition is never being called.

根路由器配置:

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):

Nested Router Config (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.

I am never getting to the debugger within getChildRoutes.

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

Any help is appreciated, and if there are any more files necessary to see I can add them.

推荐答案

想通了.我在上面的 TSP 嵌套路由器配置中的 IndexRoute 是一个函数，而不是一个对象(我假设 react-router 在触发 getChildRoutes.)

Figured it out. My IndexRoute in the above TSP nested router config was a function, not an object (which i'm assuming react-router was expecting indexRoute to be an object before firing getChildRoutes.)

解决方案是将解析后的 Overview 的 routeConfig 分配给 indexRoute.

The solution was to assign the resolved the routeConfig for Overview to 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);
    });
  }
});

这篇关于React-router:getChildRoutes 不会在嵌套的 PlainRoute 中触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！