react-router：为什么包括 <IndexRoute component={Audience}> 完全阻止我的入口点APP.js渲染？

Question

当我包含IndexRoute行时，我的APP.js组件根本不会呈现。 当我删除它时，页面呈现良好。 渲染都使用React.render完成，所以我不确定发生了什么，因为我认为这与react-router无关。 我还注释掉了APP.js文件中涉及路由的所有行。 在我的app-client.js文件中：

var React = require('react');

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

var APP = require('./components/APP');
var Audience = require('./components/Audience');
var Speaker = require('./components/Speaker');
var Board = require('./components/Board');

var routes = (
    <Router>
        <Route path="/" component={APP}>
            <IndexRoute component={Audience} />
            <Route path="speaker" component={Speaker} />
            <Route path="board" component={Board} />
        </Route>
    </Router>
);

//With Routes
//render(<Router>{routes}</Router>, document.getElementById('react-container'))

//Without Routes
React.render(<APP />, document.getElementById('react-container'));

我一直在Lynda.com上使用“ react-router v0.13”的教程“使用Socket IO和React.js构建轮询应用程序”。 到目前为止，一切正常，例如客户端和服务器之间的套接字以及渲染APP.js。 不过，我仍然停留在这一点上。 APP.js文件：

var React = require('react');
// var ReactRouter = require('react-router');
// var Router = ReactRouter.Router;

var io = require('socket.io-client');
var Header = require('./parts/Header');

var APP = React.createClass({

    getInitialState() {
        return {
            status: 'disconnected',
            title: '',
        }
    },

    componentWillMount() {
        this.socket = io('http://localhost:3000');
        this.socket.on('connect', this.connect);
        this.socket.on('disconnect', this.disconnect);
        this.socket.on('welcome', this.welcome);
    },

    connect() {
        this.setState({ status: 'connected' });
    },

    disconnect() {
        this.setState({ status: 'disconnected' });
    },

    welcome(serverState) {
        this.setState({ title: serverState.title });
    },

    render() {
        return (
            <div>
                <Header title={this.state.title} status={this.state.status} />
                // {this.props.children}
            </div>
        );
    }
});

module.exports = APP;

Answer 1

我认为不是：

render(<Router>{routes}</Router>, document.getElementById('react-container'))

您应该渲染：

render({ routes }, document.getElementById('react-container'))

因为您的路由器已经在routes变量中

Answer 2

我相信您还需要定义“ IndexRoute”。 就像是：

var IndexRoute = ReactRouter.IndexRoute;