Javascript 使用显示空白页的处理程序响应路由器

我正在实现react应用程序。顺便说一句，我遇到react路由器显示空白页，没有任何错误或异常。我已经搜索了堆栈溢出，知道浏览历史可能丢失了。我没有运气，甚至实现了浏览历史，页面仍然显示空白

这是我的密码

import React from 'react';
import ReactDOM from 'react-dom';
//import App from 'components/App.js';
//import Home from 'components/Home.js';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { Router, Route, IndexRoute, browserHistory, hashHistory, RouteHandler } from 'react-router';

injectTapEventPlugin();

var Home = React.createClass({
  render: function() {
    return (<h1>Welcome to the Home Page</h1>);
  }
});

let App = React.createClass({  
  render() {
      <div className="nav">
        <h1>It's work</h1>
        <RouteHandler/>
      </div>
  }
});

let routes = (  
  <Route name="app" path="/" handler={App} >
    <Route name="home" path="/home" handler={Home} />
  </Route>
);

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

---

问题是您忘记使用应用程序组件中的

return

，应用程序是主要组件，所以如果您不

return

任何内容，它将始终显示空白页面，请使用以下方法：

let App = React.createClass({  
    render: function {
        return (
               <div className="nav">
                   <h1>It's work</h1>
                   <RouteHandler/>
               </div>
        )
    }
});

---

检查他们正在使用的

组件

：

和

反应路由器

，您应该传递与

组件

道具匹配的组件，而不是

处理程序

。另外，您确定在html页面中有一个

#app

标记吗？是的，我的html中有一个#app。否则，它将抛出一个关于“容器不是DOM元素”的日志。但现在，它在控制台或终端中完全没有显示任何日志或错误。为什么在一个位置使用

var

，而在另一个位置使用

let

。。。在生产中，我认为不会这样做。我认为这是错误的。您使用的路由器是哪个版本？@Manyank Shukla，“react router”：“^3.0.2”，@A1ucard不要将所有代码添加为单独的ans，用所有代码更新QUE:）

let App = React.createClass({  
    render: function {
        return (
               <div className="nav">
                   <h1>It's work</h1>
                   <RouteHandler/>
               </div>
        )
    }
});

let App = React.createClass({  
   render: function() {
      return (
          <div className="nav">
              <h1>It's work</h1>
              {this.props.children}
          </div>
      );
   }
});

let routes = (  
  <Route name="app" path="/" component={App} >
    <Route name="home" path="/home" component={Home} />
  </Route>
);

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