javascript - React Router 渲染空 div

Question

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 标记中的组件替换处理程序:

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