So I was working on this last week but switched context - so now back on the problem I'm trying so solve and could do with some help.
I'm working on a handler for Hapi that provides a way to handle routes with react-router, and render react components server side.
Here is an example of how you would set it up: https://github.com/tanepiper/hapi-react-handler/blob/feature/server-side-props/example/index.js
Basically you pass an option per route that you want to render server side and tell it what method to use to generate your props (in this example simple objects, but could query a DB for example) and here is the example router I threw together:
Now in the handler, if the route is found using match, I call a method that will render the component, and also render that inside a layout file (https://github.com/tanepiper/hapi-react-handler/blob/feature/server-side-props/lib/handler.js#L101).
But I'm having difficultly getting the returned object from my example into the rendered component.
I believe there is something on RoutingContext about createElement, but I cannot find any clear docs or
examples on how to use this and when i try RoutingContext.createElement it says it's not defined?
I've tried something like Object.assign(renderProps, response.source.props) initially but that doesn't seem to work 😦
(response.source.props being the object passed back from the handler callback)
Refactoring of above and for example when I try the above with Object.assign, and then look at doing
const elem = React.createElement(RoutingContext, renderProps);
I can see props member of elem my merged in object :
props:
{ routes: [ [Object], [Object], [Object] ],
params: {},
location:
{ pathname: '/',
search: '',
hash: '',
state: null,
action: 'POP',
key: '0azo5i',
query: {} },
components: [ undefined, [Function], [Function] ],
history:
{ listenBefore: [Function: listenBefore],
listen: [Function: listen],
transitionTo: [Function: transitionTo],
pushState: [Function: pushState],
replaceState: [Function: replaceState],
go: [Function: go],
goBack: [Function: goBack],
goForward: [Function: goForward],
createKey: [Function: createKey],
createPath: [Function: createPath],
createHref: [Function: createHref],
createLocation: [Function: createLocation],
setState: [Function],
registerTransitionHook: [Function],
unregisterTransitionHook: [Function],
isActive: [Function: isActive],
match: [Function: match],
listenBeforeLeavingRoute: [Function: listenBeforeLeavingRoute] },
title: 'Hapi React Router Index',
indexMessage: 'Welcome to The Hapi React Router Example',
createElement: [Function] }
But when I do const content = renderToStaticMarkup(elem); it seems they are not rendering inside
and if i console.log(this.props) inside my component's render function those additional props are not there.
ANYONE?!?