Question

我试图让react-router启动并运行，但不知怎的，React没有在react-router中定义，因为它因错误而失败

Uncaught TypeError: Cannot read property 'createClass' of undefined

我稍后也会收到此错误：

Uncaught Error: Load timeout for modules: jsx!testapp_unnormalized2,jsx!testapp

知道我在这里做错了什么吗？我只是想让路由器工作而不连接所有文件。

这就是应用的外观：

的index.html

<!-- ... -->

    <script data-main="../resources/js/init" src="../resources/bower_components/requirejs/require.js"></script>

</body>

<!-- ... -->

init.js

require.config({

  paths: {
    react: "/resources/bower_components/react/react-with-addons",
    JSXTransformer: "/resources/bower_components/jsx-requirejs-plugin/js/JSXTransformer",
    jsx: "/resources/bower_components/jsx-requirejs-plugin/js/jsx",
    jquery : "/resources/bower_components/jquery/dist/jquery",
    'react-router' : "/resources/bower_components/react-router/dist/react-router",
    'react-router-shim': 'react-router-shim'
  },

  shim : {

    'react-router': {
      deps:    ['react'],
      exports: 'Router'
    }
  },
});

require(['jsx!testapp'], function(App){
  var app = new App();
  app.init();
});

反应路由器-shim.js

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

  window.React = React;
});

testapp.js

define(function(require){
  var React = require('react');
  var Router = require('react-router');

  var Route = Router.Route;
  var NotFoundRoute = Router.NotFoundRoute;
  var DefaultRoute = Router.DefaultRoute;
  var Link = Router.Link;
  var RouteHandler = Router.RouteHandler;

  var routes = (
    <Route handler={Home} path="/">
      <DefaultRoute handler={Home} />
    </Route>
  );

  var Home = React.createClass({
    render: function() {
      return(
        <p>This is the mathias page</p>
      );
    }
  });

  var App;

  App.init = function () {
    Router.run(routes, Router.HistoryLocation, function (Handler) {
      React.render(<Handler/>, document.getElementById('content'));
    });
  };

  return App;

});

Answer 1

react-router不支持AMD，因此默认情况下不会加载React依赖项。相反，您应首先加载React并将其设置为全局（window.React = React），或使用RequireJS shim configuration将React加载为全局。

有关react-router和AMD的更多讨论，请参阅react-router#171。

使用react-router和requirejs进行React的基本设置

1 个答案: