Skip to content

Instantly share code, notes, and snippets.

@tanepiper
Created November 17, 2015 11:52
Show Gist options
  • Select an option

  • Save tanepiper/d5853e1188af7a6eceaa to your computer and use it in GitHub Desktop.

Select an option

Save tanepiper/d5853e1188af7a6eceaa to your computer and use it in GitHub Desktop.
Trying to get some help with server side react-router rendering

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:

https://github.com/tanepiper/hapi-react-handler/blob/feature/server-side-props/example/app/router.jsx

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?!?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment