react-router 的路由怎么同步加载.....

[lolizeppelin]

用了一个买的 ui 框架...除了主路由都是异步加载的.....现在有个问题

const selectGogamechen1 = () => (state) => state.get('groups');


/**
 * Default selector used by Gogamechen1
 */

const makeSelectGogamechen1 = () => createSelector(
  selectGogamechen1(),
  (substate) => {
    console.log(substate);
    substate.toJS();
  }

如果第一个访问的页面不是 groups, 其他页面的组件调用 makeSelectGogamechen1 就会报错。

原因是 groups 路由的 reducer 还没被载入.makeSelectGogamechen1 的 substate 是 undefined

现在想到的解决方法是

1. 让这个 groups 路由不是延迟加载而是一开始加载
2. 发现 substate 为空直接跳转到到这个路由的页面(这个我也不懂咋写)
3. 其他页面不用 makeSelectGogamechen1....而是用主路由的 APP(见下面代码)的 makeSelectGlobal....但这个方式要侵入修改框架代码,肯定不这样写

方法一和方法二我都不找不到咋写, 网上一搜全是异步加载的 orz

请帮帮我这个 js 加 react 小白

入口代码

const rootRoute = {
  component: App,  //这个是主路由,一开始就加载了
  childRoutes: createRoutes(store),
};

// Inject default app sagas
sagas.map(store.runSaga);

const render = (messages) => {
  ReactDOM.render(
    <Provider store={store}>
      <LanguageProvider messages={messages}>
        <Router
          history={history}
          routes={rootRoute}
          render={
            // Scroll to top when going to a new page, imitating default browser
            // behaviour
            applyRouterMiddleware(useScroll())
          }
        />
      </LanguageProvider>
    </Provider>,
    document.getElementById('app')
  );
};

---

createRoutes 里的异步加载代码

const loadModule = (cb) => (componentModule) => {
  cb(null, componentModule.default);
};

export default function createRoutes(store) {
  // create reusable async injectors using getAsyncInjectors factory
  const { injectReducer, injectSagas } = getAsyncInjectors(store); // eslint-disable-line no-unused-vars

  return [
    {
      path: 'apiDemo',
      name: 'apiDemoPage',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          System.import('containers/ComponentDemos/ApidemoPage/reducer'),
          System.import('containers/ComponentDemos/ApidemoPage/sagas'),
          System.import('containers/ComponentDemos/ApidemoPage'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([reducer, sagas, component]) => {
          injectReducer('apidemo', reducer.default);
          injectSagas(sagas.default);

          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    },{
      path: 'groups',
      name: 'groupPage',
      // component: {},
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          System.import('containers/Gogamechen1/reducer'),
          System.import('containers/Gogamechen1/GroupPage/sagas'),
          System.import('containers/Gogamechen1/GroupPage'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([reducer, sagas, component]) => {
          injectReducer('groups', reducer.default);
          injectSagas(sagas.default);

          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    }, 
  ];
}

请问我怎么让 groups 不异步加载而是和 App 一样访问任何页面都加载

库版本

    "material-ui": "^0.18.7",
    "minimist": "1.2.0",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-addons-css-transition-group": "^15.4.2",
    "react-dom": "^15.6.1",
    "react-helmet": "3.2.2",
    "react-image-gallery": "^0.8.3",
    "react-intl": "^2.4.0",
    "react-redux": "^5.0.5",
    "react-router": "^3.0.2",
    "react-router-redux": "4.0.6",
    "react-router-scroll": "^0.4.2",
    "react-tap-event-plugin": "^2.0.1",
    "recharts": "^1.0.0-alpha.4",
    "redux": "3.6.0",
    "redux-immutable": "3.0.8",
    "redux-saga": "^0.15.4",
    "reselect": "2.5.4",

[lolizeppelin]

const makeSelectGogamechen1 = () => createSelector(
selectGogamechen1(),
(substate) => {
console.log(substate);
substate.toJS();
}

这里加打印稍微弄错了下代码 是

return substate.toJS();

[lolizeppelin]

我用了一个假冒的方式.....让那边页面判断...但这好像不是一个正规的解决方式...


const makeSelectGogamechen1 = () => createSelector(
selectGogamechen1(),
(substate) => {
console.log(substate);
if (substate === undefined) return { group: null };
return substate.toJS();
}
);


引用页面判断 group === null 就跳转

[otakustay]

你要同步 reducer 也要同步，在 createStore 的时候就直接准备好 reducer 创建出来

[meszyouh]

groups 是顶级路由吧？直接写在外面，不用 wepack 的 import