React路由器渲染空的div

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

Answer 1

尝试用Route标记中的组件replace处理程序：

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