React Router / Hapi Server Side Rendering Error - reactjs

Question

I've been struggling this for a while, and previously had this working, but inexplicably, it's broken again, so clearly the root cause has not been resolved.
React Router v: 2.0.0-rc4
Issue: When loading a page, server returns the following error.
Warning: Failed propType: Required prop `router` was not specified in `RouterContext`.
Warning: Failed propType: Required prop `location` was not specified in `RouterContext`.
Warning: Failed propType: Required prop `routes` was not specified in `RouterContext`.
Warning: Failed propType: Required prop `params` was not specified in `RouterContext`.
Warning: Failed propType: Required prop `components` was not specified in `RouterContext`.
Warning: [react-router] `<RouterContext>` expects a `router` rather than a `history`
The page loads normally though, and client side routing seems to work just fine.
relevant snippet from Server.js:
import routeConfig from './../common/routes/Routes.js';
const handleRender = function(req, res) {
const initialState = {
profile: {
name: 'Bob',
age: 10
},
messages: []
}
const createStoreWithMiddleware = applyMiddleware( thunkMiddleware)(createStore);
const store = createStoreWithMiddleware(reducer(initialState));
match({routes: routeConfig, location: req.url}, (error, redirectLocation, renderProps) => {
// res(req.url);
if(error) {
res('error' + error.message);
}
else {
res(renderProps);
const html = renderToString(
<Provider store={store}>
<RouterContext {...renderProps} />
</Provider>
);
//const initialState = store.getState();
//res(renderFullPage(html, initialState));
}
});
}
Here is what is exported from Routes.js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Route } from 'react-router';
//Components
import App from './../components/App.jsx';
import Name from './../components/Name.jsx';
import Profile from './../components/Profile.jsx';
import Messages from './../components/Messages.jsx';
const routeConfig = [
{
path: '/',
component: App,
childRoutes: [
{path: 'test', component: Name},
{path: 'profile', component: Profile},
{path: 'messages', component: Messages}
]
}
];
export default routeConfig;
When I dump out renderprops, this is what I get
{
routes: [
{
path: "/",
childRoutes: [
{
path: "test"
},
{
path: "profile"
},
{
path: "messages"
}
]
},
{
path: "test"
}
],
params: { },
location: {
protocol: null,
slashes: null,
auth: null,
host: null,
port: null,
hostname: null,
hash: null,
search: null,
query: { },
pathname: "/test",
path: "/test",
href: "/test"
},
components: [
null,
null
],
history: {
__v2_compatible__: true
},
router: {
__v2_compatible__: true
}
}
So it seems like it's never matching components. Perhaps I'm passing in req.url incorrectly? But I can't find any react-router documentation that indicates exactly what that argument should look like.

Answer 1

Leaving this here in case anyone else runs into something this silly.
After enabling more robust error logging via Good, I realized that this error was actually in reference to a request to /favicon.ico, which my routes were not handling, and which were falling down into my react routes.
Very dumb mistake on my part, and due to my inexperience with needing to handle/log errors in Hapi.

Answer 2

If you, like me, came here following the reactjs react-router-tutorial on Github (if not, go check it out), these error messages might show because you haven't described any alternatives to finding a route in the Routes'. If it only shows up on undefined routes (try typing something random after localhost:8080/), do yourself a favour and read this to the end.
Also, insert a console.log('req.url: ', req.url) in the app.get call in the server to see what is causing the error.
Also II: Declare appHTML outside of the match function to ensure it survives into res.send().