React Router渲染空div

时间:2016-03-01 03:05:24

标签: javascript node.js reactjs react-router

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

1 个答案:

答案 0 :(得分:3)

尝试使用Route标记中的组件替换处理程序:

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