为什么这个RequireJS垫片不适用于react-router

时间:2014-09-14 17:33:43

标签: requirejs reactjs react-router

我正在尝试通过require获取反应和反应路由器加载到我的应用程序中。我必须遵循垫片设置,但我仍然得到一个错误,其中react-router没有得到正确的React对象。

  paths:   {
    domReady:       '../lib/requirejs-domready/domReady',
    react:          '../lib/react/react',
    'react-router': '../lib/react-router/dist/react-router'
  },
  shim:    {
    'react':        {
      exports: 'React'
    },
    'react-router': {
      deps:    ['react'],
      exports: 'ReactRouter'
    }
  }

  require(['domReady!', 'react', 'react-router'], ...


Uncaught TypeError: Cannot read property 'createClass' of undefined react-router.js:372
../utils/withoutProperties react-router.js:1
s react-router.js:1
(anonymous function) react-router.js:62
./Route react-router.js:1
s react-router.js:1
(anonymous function) react-router.js:886
./actions/LocationActions react-router.js:1
s react-router.js:1
e react-router.js:1
(anonymous function) require.js:1658
context.execCb require.js:874
Module.check require.js:1151
Module.enable require.js:782
Module.init require.js:1178
callGetModule require.js:1552
context.completeLoad require.js:1679
context.onScriptLoad

通过Bower安装的所有东西。 React为0.11.1,路由器为0.7.0

1 个答案:

答案 0 :(得分:10)

只有设置了window.Reactglobal.React后,才会在来源中显示react-router。 React本身不会在RequireJS环境中公开global对象。所以我最后写了一个垫片。

paths:   {
  domReady:       '../lib/requirejs-domready/domReady',
  react:          '../lib/react/react',
  'react-router': '../lib/react-router/dist/react-router',
  'react-router-shim': 'react-router-shim'
},
shim:    {
  'react-router-shim': {
    exports: 'React'
  },
  'react-router': {
    deps:    ['react-router-shim'],
    exports: 'ReactRouter'
  }
}

反应路由器-垫片:

define(['react'], function(React) {
  "use strict";

  window.React = React;
});

然后我可以使用react和react-router作为正确的依赖关系。