Reactjs React路由器呈现空脚本标记

我试图找出React Router，但当我加载页面时，我只看到呈现的是一个空的脚本标记。我一定是做错了什么。我遵循了文档页面上的指南

var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;

var About = require('./About');
var Inbox = require('./Inbox');

var routes = (
  <Route handler={App}>
    <Route path="about" handler={About}/>
    <Route path="inbox" handler={Inbox}/>
  </Route>
);

var App = React.createClass({
    render () {
      return (
        <div>
          <h1>App</h1>
          <RouteHandler/>
        </div>
      )
    }
});

Router.run(routes, Router.HashLocation, (Root) => {
    React.render(<Root/>, document.getElementById('app'));
});

var React=require（'React'）；
var-Router=require（'react-Router'）；
var-Route=路由器.Route；
var RouteHandler=Router.RouteHandler；
变量About=要求（'./关于'）；
var收件箱=要求（'./收件箱'）；
变量路由=(
);
var App=React.createClass({
渲染（）{
返回(
应用程序
)
}
});
Router.run（routes，Router.HashLocation，（Root）=>{
React.render（，document.getElementById（'app'））；
});

我想出来了。我需要将我的路线变量放在应用程序下面，如下所示：

var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;

var About = require('./About');
var Inbox = require('./Inbox');

var App = React.createClass({
    render () {
      return (
        <div>
          <h1>App</h1>
          <RouteHandler/>
        </div>
      )
    }
});

var routes = (
  <Route handler={App}>
    <Route path="about" handler={About}/>
    <Route path="inbox" handler={Inbox}/>
  </Route>
);

Router.run(routes, Router.HashLocation, (Root) => {
    React.render(<Root/>, document.getElementById('app'));
});

var React=require（'React'）；
var-Router=require（'react-Router'）；
var-Route=路由器.Route；
var RouteHandler=Router.RouteHandler；
变量About=要求（'./关于'）；
var收件箱=要求（'./收件箱'）；
var App=React.createClass({
渲染（）{
返回(
应用程序
)
}
});
变量路由=(
);
Router.run（routes，Router.HashLocation，（Root）=>{
React.render（，document.getElementById（'app'））；
});

更准确地说，您需要将

App

的用法置于

App

的定义之下。