`RouteHandler` 中未指定所需的上下文`routeDepth`答案

【问题标题】：Required context `routeDepth` was not specified in `RouteHandler``RouteHandler` 中未指定所需的上下文`routeDepth`
【发布时间】：2015-07-25 14:42:06
【问题描述】：

几个小时以来，我一直在尝试制作 React 应用程序的原型，但在尝试实现路由时遇到了困难。我遇到的错误是：

Warning: Failed Context Types: Required context `routeDepth` was not specified in `RouteHandler`.
Warning: Failed Context Types: Required context `router` was not specified in `RouteHandler`.
Warning: owner-based and parent-based contexts differ (values: `undefined` vs `1`) for key (routeDepth) while mounting RouteHandler
Uncaught TypeError: Cannot read property 'getRouteAtDepth' of undefined

这是一个同构应用程序（在服务器和客户端上呈现），显然我读到的所有内容都提到了 React 或 React-Router 被加载两次。但是我还没有看到解决这个问题的好方法以及导致它的原因（是 Gulp 配置还是只是跨文件导入 React 的方式？）。

这是我所拥有的：

server.js

var express = require('express');
var http = require('http');
var app = express();
var React = require('react');
var Router = require('react-router');

require("babel/register");

var routes = require('./app/routes.js');

app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public'));

app.use(function(req, res) {
  Router.run(routes, req.path, function(Handler) {
    var html = React.renderToString(React.createElement(Handler));
    var page = res.render(__dirname + '/server/views/index.ejs', {reactOutput: html});
  });
});

var server = app.listen(8080, function(req, res) {
    console.log('Server started');
});

require('./server/routes/routes.js')(app, io);

index.ejs

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>React App</title>
    <link rel="stylesheet" href="/css/style.css"/>
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400' rel='stylesheet' type='text/css'>
</head>
<body>
    <div id="app"><%- reactOutput %></div>
    <script src="/bower_components/socket.io-client/socket.io.js"></script>
    <script src="/js/vendor.js"></script>
    <script src="/js/vendor.bundle.js"></script>
    <script src="/js/bundle.js"></script>
</body>
</html>

app.js（在 gulp 运行后会变成 bundle.js）

var React = require('react');
var ReactApp = require('./components/App/ReactApp.js');
var Activity = require('./components/Activity/Activity.js');
var Router = require('react-router');
var routes = require('./routes.js');
var Route = Router.Route;
var Link = Router.Link;

Router.run(routes, Router.HashLocation, function(Handler) {
  React.render(<Handler/>, document.getElementById("app"));
});

routes.js

var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var Link = Router.Link;

var App = require('./components/App/ReactApp.js');
var ActivitiesList = require('./components/ActivitiesList/ActivitiesList.js');
var Activity = require('./components/Activity/Activity.js');
var Task = require('./components/Task/Task.js');


export default (
  <Route path="/" handler={App}>
    <Route path="/activity" component={Activity}/>
  </Route>
);

谢谢！

【问题讨论】：

标签： reactjs react-router isomorphic-javascript

【解决方案1】：

我正在回答我自己的问题，因为我做错了几件事并认为值得分享：

由于未知原因，当我将 ReactApp 组件的语法从 ES5 更改为 ES6 时，引发此问题的错误消失了。（我没有在问题中发布此文件）；我不知道这是否是 browserify 的要求，但我最终将我所有的 ES5 语法都更改为 ES6，如果你从 React 开始，我建议你这样做，因为大多数示例都使用 ES6。
在server.js中我对服务器路由文件的要求（require('./server/routes/routes.js')）应该在Router.run之前，否则我所有的api请求都会被React-Router拦截；
在<Route path="/activity" component={Activity} /> 中，我将component 替换为handler。
如果您不想在 URL 中使用哈希 #，请在 routes.js 中将 Router.HashLocation 替换为 Router.HistoryLocation。

【讨论】：