The required `routeDepth` context was not specified in the` RouteHandler`
I've been trying to prototype a React app for hours and I'm stuck trying to implement routes. I have errors:
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
This is an isomorphic application (displayed on server and client) and obviously everything I read is talking about loading React or React-Router . But I haven't seen a decent way to solve this problem and what is causing it (is it a Gulp configuration or just a way to import React into files?).
Here's what I have:
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 (which will become bundle.js after running Gulp)
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>
);
Thank!
+3
source to share
1 answer
I am answering my own question because I have a couple of things that I was doing wrong and thought it was worth sharing:
- For some unknown reason, the error that caused this question went away when I changed the syntax of the ReactApp component from ES5 to ES6. (I have not posted this file in the question); I don't know if this is a browser requirement, but I ended up changing all my ES5 syntax to ES6, and if you are starting with React I advise you to do the same as most ES6 examples.
- In
server.js
my request for a file server routes (require('./server/routes/routes.js')
) should be upRouter.run
, otherwise all my api requests are intercepted React-Router; - As
<Route path="/activity" component={Activity} />
I changedcomponent
tohandler
. - In,
routes.js
replaceRouter.HashLocation
withRouter.HistoryLocation
if you don't want the hash#
in your url.
+1
source to share