reactjs - React Router 渲染空脚本标签

Question

我正在尝试找出 React Router，但是当我加载页面时，我只看到呈现一个空的脚本标签。我一定做错了什么。我已按照 React 路由器文档页面上的指南进行操作。

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'));
});

Answer 1

我明白了。我需要将我的路线变量放在应用程序下面，如下所示:

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'));
});