Question

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

这是我的代码，

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"
  }
}

Answer 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

React路由器与显示空白页的处理程序

1 个答案: