React Router 渲染空 div答案

【问题标题】：React Router rendering empty divReact Router 渲染空 div
【发布时间】：2016-06-13 08:09:04
【问题描述】：

app div 为空。它里面唯一的东西是一个noscript标签。

var React = require('react');
var ReactDOM = require('react-dom');
var reactRouter = require('react-router');

var Router = reactRouter.Router;
var DefaultRoute = reactRouter.DefaultRoute;
var Route = reactRouter.Route; 
var RouteHandler = reactRouter.RouteHandler;
var Link = reactRouter.Link;

var LoginHandler = require('./components/LoginHandler.jsx');

var AppComponent = React.createClass({
    render: function() {
        return(
            <nav>
            <Link to="/">Home</Link>
            <Link to="login">Login</Link>
            <RouteHandler/>
            </nav>
        )
    }
});

var routes = (  
    <Route name="app" path="/" handler={AppComponent}></Route>
)

ReactDOM.render(<Router routes={routes}/>, document.getElementById('app'));`

【问题讨论】：

不确定是否重要，但您不需要';' ) 之后会关闭 return() 语句？
@CotyEmbry 不，该位置的分号不会有任何区别，因为该位置的换行符也是行尾终止符
@bounty 你可以发布你的 package.json 或者你的 react-router 版本。看来您正在使用旧版本的 api，也许您安装了新版本

标签： javascript node.js reactjs react-router

【解决方案1】：

尝试用Route标签中的组件替换handler：

var React = require('react');
var ReactDOM = require('react-dom');
var reactRouter = require('react-router');

var Router = reactRouter.Router;
var DefaultRoute = reactRouter.DefaultRoute;
var Route = reactRouter.Route; 
var RouteHandler = reactRouter.RouteHandler;
var Link = reactRouter.Link;

var LoginHandler = require('./components/LoginHandler.jsx');

var AppComponent = React.createClass({
    render: function() {
        return(
            <nav>
            <Link to="/">Home</Link>
            <Link to="login">Login</Link>
            <RouteHandler/>
            </nav>
        )
    }
});

var routes = (  
    <Route name="app" path="/" component={AppComponent}></Route>
)

ReactDOM.render(<Router routes={routes}/>, document.getElementById('app'));

【讨论】：