我试图让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;
});
答案 0 :(得分:1)
react-router不支持AMD,因此默认情况下不会加载React依赖项。相反,您应首先加载React并将其设置为全局(window.React = React
),或使用RequireJS shim configuration将React加载为全局。
有关react-router和AMD的更多讨论,请参阅react-router#171。