javascript - 带处理程序的React Router显示空白页

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

这是我的代码，

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

如果您对此有所了解，请感谢他人的贡献。

这是我的包json。

{
  "name": "finalize",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-eslint": "^7.2.1",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-0": "^6.22.0",
    "eslint": "^3.18.0",
    "eslint-plugin-react": "^6.10.3",
    "express": "^4.15.2",
    "file-loader": "^0.10.1",
    "react-hot-loader": "^1.3.1",
    "webpack": "^2.3.2",
    "webpack-dev-middleware": "^1.10.1",
    "webpack-hot-middleware": "^2.17.1"
  },
  "dependencies": {
    "material-ui": "^0.17.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2",
    "react-tap-event-plugin": "^2.0.1"
  }
}

最佳答案

问题是您忘记了在App组件中使用return，App是主要组件，因此，如果您不使用return它将始终显示空白页，请使用以下命令：

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

handler已被弃用，而不是在component中使用handler，在v3.x中不支持。检查以下内容：https://github.com/ReactTraining/react-router/issues/2887

像这样使用它：

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

检查文档，他们也正在使用component：https://github.com/reactjs/react-router-tutorial/tree/master/lessons/02-rendering-a-route