React-router: How to pass init data with server rending in rc-1

Created on 16 Sep 2015 · 12Comments · Source: ReactTraining/react-router

`javascript
match({routes,location}, (error, redirectLocation, renderProps) => {

    //var locales = 'zh-CN';
    var locales = "en-US";

    var injectData = {
        initData: {
            userInfo: {
                username: req.params.name
            },
            bookmarks:API.bookmarks.getInitBookmarks()

        },
        locales:locales,
        messages:i18n[locales]
    };

    var newProps = assign({},renderProps,injectData);

    console.log(newProps);

    if(redirectLocation){

    }else if(error){

    }else if(renderProps == null){

    }else{
        res.render('default',{
            markup:React.renderToString(<RoutingContext {...newProps}/>),
            inject:'window.__INJECTED = ' +JSON.stringify(injectData)
        });
    }
});

```

I use like this ,but I can't my inject data in component with this.props

Source

Yixi

Most helpful comment

This is my current approach:

import React from 'react';

class DataWrapper extends React.Component {

    getChildContext () {

        return {
            data: this.props.data
        };
    }

    render () {

        return this.props.children;
    }
}

DataWrapper.childContextTypes = {
    data: React.PropTypes.object.isRequired
};

export default DataWrapper;

so you can use it on the server like:

// data is fetched from mongo or whatever
ReactDOMServer.renderToString(<DataWrapper data={ data }><RoutingContext {...renderProps}/></DataWrapper>)

or on the browser like:

var data    = JSON.parse(document.getElementById('data').innerHTML),
    history = createBrowserHistory();

ReactDOM.render(<DataWrapper data={ data }><Router history={ history }>{ routes }</Router></DataWrapper>, document.getElementById('app'));

What do you think?

coma on 17 Sep 2015

👍3

All 12 comments

I'd like to know this as well. Currently I'm doing it in a very hacky way:

var routes = function(store){
  return (
    <Route component={App} store={store}>
      <Route path="/" component={Main}/>
    </Route>
  )
};
export default routes;

"store" is what I'm injecting into props.

match({routes: routes(store), location}, (error, isRedirect, renderProps) => {
  ReactDOMServer.renderToString(<RoutingContext {...renderProps}/>),
});

And then I use it like this in my App component

this.props.route.store

This seems very wrong but it works. Can anyone help us out here?

nightwolfz on 16 Sep 2015

Try the following, it should work :)

Inject "store" through createElement.

...
match({routes, location}, (error, isRedirect, renderProps) => {

    function createElement(Component, props){
        return <Component {...props} {...store} />;
    }

    return doSomething({
        renderProps: <RoutingContext {...renderProps} createElement={createElement}/>,
    });
});
...

nightwolfz on 16 Sep 2015

The RoutingContext source code
https://github.com/rackt/react-router/blob/master/modules/RoutingContext.js#L55L77

It does't pass the customize props to the Router, only the React-router pre-define props. I tried merge the inject data to the this.props.params like this:

assign(renderProps.params,injectData);

but I think this is a wrong way too.

Yixi on 17 Sep 2015

This is my current approach:

import React from 'react';

class DataWrapper extends React.Component {

    getChildContext () {

        return {
            data: this.props.data
        };
    }

    render () {

        return this.props.children;
    }
}

DataWrapper.childContextTypes = {
    data: React.PropTypes.object.isRequired
};

export default DataWrapper;

so you can use it on the server like:

// data is fetched from mongo or whatever
ReactDOMServer.renderToString(<DataWrapper data={ data }><RoutingContext {...renderProps}/></DataWrapper>)

or on the browser like:

var data    = JSON.parse(document.getElementById('data').innerHTML),
    history = createBrowserHistory();

ReactDOM.render(<DataWrapper data={ data }><Router history={ history }>{ routes }</Router></DataWrapper>, document.getElementById('app'));

What do you think?

coma on 17 Sep 2015

👍3

How are you passing the props from DataWrapper to the routed components?

nightwolfz on 19 Sep 2015

@nightwolfz, using context like:

class SomeRoutedComponent extends React.Component {

    constructor (props, context) {

        super(props, context);
        this.state = context.data.someData;
    }
}

SomeRoutedComponent.contextTypes = {
    data: React.PropTypes.object.isRequired
};

export default SomeRoutedComponent;

coma on 19 Sep 2015

@coma Thanks! Works wonderfully!

nightwolfz on 20 Sep 2015

Thanks for answering @coma

knowbody on 22 Sep 2015

@coma where is the id="data" element? Since it's var data = JSON.parse(document.getElementById('data').innerHTML)

brickyang on 5 Nov 2015

@brickyang it's present in my index.html!

My approach is slightly different now that I'm using https://github.com/rackt/react-redux, but the store rehydration on the client side looks pretty similar to the example above.

coma on 5 Nov 2015

@coma Got it. Thx!

brickyang on 5 Nov 2015

Does it feel wrong to anyone else that this should be closed because you can hack around the issue using an experimental React feature that's likely to break in future releases? Is there a downside to just allowing arbitrary props to be passed down instead, so that @nightwolfz's createElement method would work?