I am creating a simple toy application to learn React / Hapi, and everything works fine until I try to configure server routing. The server works without errors and correctly displays "/" with the help of the hi world.
However, when I go to "/ test", I get the following errors.
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`.
Where am I wrong here?
Server.js
'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) => { //res(req.url); if(error) { res(error.message); } else { const html = renderToString( <Provider store={store}> <RoutingContext {...renderProps} /> </Provider> ); const initialState = store.getState(); res(renderFullPage(html, initialState)); } }); // const html = renderToString( // <Provider store={store}> // <App /> // </Provider> // ); // const initialState = store.getState(); // res(renderFullPage(html, initialState)); } const renderFullPage = function(html, initialState) { return ` <!doctype html> <html> <head> <title>Please Work</title> </head> <body> <div id="app-mount">${html}</div> <script> window.__INITIAL_STATE__ = ${JSON.stringify(initialState)} </script> <script src="/static/bundle.js"></script> </body> </html> `; } server.register(require('inert'), (err) => { 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(() => { console.log('Server running at:', server.info.uri); }) })
Routes.js
import { Route } from 'react-router'; //Components import App from './../components/App.jsx'; import Name from './../components/Name.jsx'; export default ( <Route path="/" component={App}> <Route path="test" component={Name} /> </Route> );
Because they were asked
Client entry.jsx
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( <Provider store={store}> <Router /> </Provider> , document.getElementById('app-mount'));
Client router
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 ( <Router history={history}> <Routes /> </Router> );