Question

知道如何让react-router与ReactJS合作？

我在浏览器控制台中抛出错误。我的代码如下。我安装了npm react-router并使用了基本服务器，即python -m SimpleHTTPServer 3000，它适用于没有路由器代码的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);

Answer 1

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 />

Answer 2

当我升级到react-router 0.5并且我甚至使用react 0.11时，我遇到了同样的问题。我改为{this.props.activeRouteHandler（）}并开始工作。我将此标记为“待办事项”。

无论你做什么，都不要放弃。它很棒！我们之前使用的是骨干路由器，与我们的旧设置相比，这种反应路由器是如此的祝福！

使用您的目录设置，您可以将需求更改为“require（'react'）”并使用browserify将您的应用程序和所需的依赖项构建到单个js资产中。其他一切看起来都不错。

获取解析错误<this.props.activeroutehandler> </this.props.activeroutehandler>

2 个答案: