解析错误<this.props.activeRouteHandler/>
Getting Parse Error <this.props.activeRouteHandler/>
知道如何让react-router与ReactJS一起工作吗?
它在浏览器控制台为我抛出错误。我的代码如下。我安装了npm react-router，并使用了一个基本的服务器，即python -m SimpleHTTPServer 3000，它适用于没有Router代码的React应用程序。
控制台错误是Uncaught Error: Parse Error: Line 18: Unexpected token .
<this.props.activeRouteHandler/>
我认为这是我的app.js找不到react-router模块，但也许是RequireJS问题(我包括它从CDN在我的索引)??
Directories
/index.html
/scripts/app.js
/node_modules/react-router
index . html
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<script src="http://fb.me/react-0.10.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx" src="scripts/app.js"></script>
</body>
</html>
app.js
/** @jsx React.DOM */
var Routes = require('../node_modules/react-router/modules/main').Routes;
var Route = require('../node_modules/react-router/modules/main').Route;
var Link = require('../node_modules/react-router/modules/main').Link;
var About = React.createClass({
render: function() {
return <h2>About</h2>;
}
});
var Users = React.createClass({
render: function() {
return (
<div>
<h2>Users</h2>
<this.props.activeRouteHandler/>
</div>
);
}
});
var User = React.createClass({
render: function() {
return <div>{this.props.params.userId}</div>
}
});
var App = React.createClass({
render: function() {
return (
<div>
<ul>
<li><Link to="about">About</Link></li>
<li><Link to="users">Users</Link></li>
<li><Link to="user" userId="123">User 123</Link></li>
</ul>
<this.props.activeRouteHandler/>
</div>
);
}
});
React.renderComponent((
<Routes>
<Route handler={App}>
<Route name="about" handler={About}/>
<Route name="users" handler={Users}>
<Route name="user" path="/user/:userId" handler={User}/>
</Route>
</Route>
</Routes>
), document.body);
当我升级到react-router 0.5时，我甚至使用react 0.11也遇到了同样的问题。我改为{this.props.activeRouteHandler()}，它开始工作。我把它标记为"待办事项"来研究。
无论你做什么，都不要放弃。效果很好!我们以前使用骨干路由器和这个反应路由器是如此的祝福相比，我们的旧设置!
同样，在你的目录设置中，你可以将你的require更改为"require('react')"，并使用browserify将你的应用程序和所需的依赖项构建到一个单独的js资源中。其他的看起来都很好。
JSX中的命名空间支持是在React 0.11.0中引入的。你有0.10.0。将脚本标签改为使用0.11.0.
<script src="http://fb.me/react-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
对于0.10.0及以下版本，您可以这样做:
var activeRouteHandler = this.props.activeRouteHandler;
return <activeRouteHandler />
相关文章：
- 没有找到相关文章
