title: React Router serverside rendering errors: Warning: Failed propType: Required prop `history` was not specified in `RoutingContext`
body: <p>I'm setting up a simple toy app to learn React/Hapi and everything is working well till I try and set up serverside routing. The server runs without error and renders "/" properly with hello world.</p>
  
  <p>However when I navigate to "/test" I get the following errors.</p>
  
  <pre><code>Warning: Failed propType: Required prop `history` was not specified in `RoutingContext`.
  Warning: Failed propType: Required prop `location` was not specified in `RoutingContext`.
  Warning: Failed propType: Required prop `routes` was not specified in `RoutingContext`.
  Warning: Failed propType: Required prop `params` was not specified in `RoutingContext`.
  Warning: Failed propType: Required prop `components` was not specified in `RoutingContext`.
  </code></pre>
  
  <p>Where am I going wrong here?</p>
  
  <p>Server.js </p>
  
  <pre><code>'use strict';
  
  const Hapi = require('hapi');
  const Path = require('path');
  
  const server = new Hapi.Server();
  server.connection({ port: 3000});
  
  //React Junk
  import React from 'react';
  import {createStore} from 'redux';
  import {Provider} from 'react-redux';
  import { renderToString } from 'react-dom/server';
  import reducer from './../common/Reducers/index.js';
  import { match, RoutingContext } from 'react-router';
  import Routes from './../common/routes/Routes.js';
  
  const handleRender = function(req, res) {
      const store = createStore(reducer);
      match({Routes, location: req.url}, (error, redirectLocation, renderProps) =&gt; {
          //res(req.url);
          if(error) {
              res(error.message);
          }
          else {
              const html = renderToString(
              &lt;Provider store={store}&gt;
                  &lt;RoutingContext {...renderProps} /&gt;
              &lt;/Provider&gt;
              );
  
              const initialState = store.getState();
  
              res(renderFullPage(html, initialState));
          }
  
      });
      // const html = renderToString(
      //  &lt;Provider store={store}&gt;
      //      &lt;App /&gt;
      //  &lt;/Provider&gt;
      // );
  
      // const initialState = store.getState();
  
      // res(renderFullPage(html, initialState));
  }
  
  const renderFullPage = function(html, initialState) {
      return `
          &lt;!doctype html&gt;
          &lt;html&gt;
              &lt;head&gt;
                  &lt;title&gt;Please Work&lt;/title&gt;
              &lt;/head&gt;
              &lt;body&gt;
                  &lt;div id="app-mount"&gt;${html}&lt;/div&gt;
                  &lt;script&gt;
                      window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
                  &lt;/script&gt;
                  &lt;script src="/static/bundle.js"&gt;&lt;/script&gt;
              &lt;/body&gt;
          &lt;/html&gt;
      `;
  }
  
  server.register(require('inert'), (err) =&gt; {
      server.route({
          method: 'GET',
          path: '/static/{filename}',
          handler: function (req, reply) {
              reply.file('static/' + req.params.filename);
          }
      })
      server.route({
          method: 'GET',
          path: '/',
          handler: function(req, res) {
              res('hello world');
          }
      });
      server.route({
          method: 'GET',
          path: '/{path*}',
          handler: function(req, res) {
              handleRender(req, res);
          }
      })
  
      server.start(() =&gt; {
          console.log('Server running at:', server.info.uri);
      })
  })
  </code></pre>
  
  <p>Routes.js</p>
  
  <pre><code>import { Route } from 'react-router';
  
  //Components
  import App from './../components/App.jsx';
  import Name from './../components/Name.jsx';
  
  export default (
      &lt;Route path="/" component={App}&gt;
          &lt;Route path="test" component={Name} /&gt;
      &lt;/Route&gt;
  );
  </code></pre>
  
  <p>Because they were asked for</p>
  
  <p>Client entry.jsx</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import {createStore} from 'redux';
  import {Provider} from 'react-redux';
  import App from './../common/components/App.jsx';
  import Router from './../common/routes/Router.jsx';
  import reducers from './../common/Reducers';
  
  const initialState = window.__INITIAL_STATE__;
  const store = createStore(reducers(initialState));
  
  ReactDOM.render(
      &lt;Provider store={store}&gt;
          &lt;Router /&gt;
      &lt;/Provider&gt;
  , document.getElementById('app-mount'));
  </code></pre>
  
  <p>Client Router</p>
  
  <pre><code> import React, {Component} from 'react';
  import ReactDOM from 'react-dom';
  import { Router, Route } from 'react-router';
  import createHashHistory from 'history/lib/createHashHistory';
  
  const history = createHashHistory();
  
  import Routes from './Routes.js';
  
  export default (
      &lt;Router history={history}&gt;
          &lt;Routes /&gt;
      &lt;/Router&gt;
  );
  </code></pre>