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

2018-04-02 09:58:41 +08:00
 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",
2487 次点击
所在节点    程序员
4 条回复
lolizeppelin
2018-04-02 10:21:07 +08:00
const makeSelectGogamechen1 = () => createSelector(
selectGogamechen1(),
(substate) => {
console.log(substate);
substate.toJS();
}

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

return substate.toJS();
lolizeppelin
2018-04-02 10:26:01 +08:00
我用了一个假冒的方式.....让那边页面判断...但这好像不是一个正规的解决方式...


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


引用页面判断 group === null 就跳转
otakustay
2018-04-02 13:10:49 +08:00
你要同步 reducer 也要同步,在 createStore 的时候就直接准备好 reducer 创建出来
meszyouh
2018-04-02 14:03:37 +08:00
groups 是顶级路由吧?直接写在外面,不用 wepack 的 import

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/443466

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX