Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Router / Hapi Server Side Rendering Error

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.

like image 325
Trattles Avatar asked Dec 14 '22 09:12

Trattles


1 Answers

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.

like image 103
Trattles Avatar answered Jan 11 '23 09:01

Trattles