V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lolizeppelin
V2EX  ›  程序员

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

  •  
  •   lolizeppelin · 2018-04-02 09:58:41 +08:00 · 2352 次点击
    这是一个创建于 2187 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用了一个买的 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",
    
    4 条回复    2018-04-02 14:03:37 +08:00
    lolizeppelin
        1
    lolizeppelin  
    OP
       2018-04-02 10:21:07 +08:00
    const makeSelectGogamechen1 = () => createSelector(
    selectGogamechen1(),
    (substate) => {
    console.log(substate);
    substate.toJS();
    }

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

    return substate.toJS();
    lolizeppelin
        2
    lolizeppelin  
    OP
       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
        3
    otakustay  
       2018-04-02 13:10:49 +08:00
    你要同步 reducer 也要同步,在 createStore 的时候就直接准备好 reducer 创建出来
    meszyouh
        4
    meszyouh  
       2018-04-02 14:03:37 +08:00 via Android
    groups 是顶级路由吧?直接写在外面,不用 wepack 的 import
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3212 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 14:18 · PVG 22:18 · LAX 07:18 · JFK 10:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.