From bb0a6aa675088a219107cf15a7d497d64832800b Mon Sep 17 00:00:00 2001 From: Joseph Tibbertsma Date: Wed, 23 Nov 2016 11:43:53 -0800 Subject: [PATCH] Minor changes to code-splitting.md --- docs/additional-reading/code-splitting.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/additional-reading/code-splitting.md b/docs/additional-reading/code-splitting.md index 8887ef42d..020cdf48e 100644 --- a/docs/additional-reading/code-splitting.md +++ b/docs/additional-reading/code-splitting.md @@ -19,15 +19,15 @@ Different markup is generated on the client than on the server. Why does this ha ### The solution -To prevent this, you have to wait until the code chunk is fetched before doing the initial render on the client side. To accomplish this, react on rails allows you to register a renderer. This works just like registering a generator function, except that the function you pass takes three arguments: `renderer(props, railsContext, domNodeId)`, and is responsible for calling `ReactDOM.render` to render the component to the DOM. React on rails will automatically detect when a generator function take three arguments, and will not call `ReactDOM.render`, instead allowing you to control the initial render yourself. +To prevent this, you have to wait until the code chunk is fetched before doing the initial render on the client side. To accomplish this, react on rails allows you to register a renderer. This works just like registering a generator function, except that the function you pass takes three arguments: `renderer(props, railsContext, domNodeId)`, and is responsible for calling `ReactDOM.render` to render the component to the DOM. React on rails will automatically detect when a generator function takes three arguments, and will not call `ReactDOM.render`, instead allowing you to control the initial render yourself. Here's an example of how you might use this in practice: #### page.html.erb ```erb -<%= redux_store_hydration_data %> <%= react_component("NavigationApp", prerender: true) %> <%= react_component("RouterApp", prerender: true) %> +<%= redux_store_hydration_data %> ``` #### clientRegistration.js @@ -74,8 +74,9 @@ import routes from '../routes/routes'; const RouterAppRenderer = (props, railsContext, domNodeId) => { const store = ReactOnRails.getStore('applicationStore'); + const history = browserHistory; - match({ history: browserHistory, routes }, (error, redirectionLocation, renderProps) => { + match({ history, routes }, (error, redirectionLocation, renderProps) => { if (error) { throw error; }