don't modify state from server in browser

Author: olegman

src/browser-router.tsx

@@ -5,15 +5,17 @@ import { Context, stringifyQuery } from 'router-async';
 export default class BrowserRouter extends Router {
     private history: any;
     private unlistenHistroy: any;
+    private stateFromServer: any;
     constructor(props) {
         super(props);
         this.history = props.history;
+        this.stateFromServer = null;
         if (window && '__REACT_ROUTER_ASYNC__' in window) {
-            const stateFromServer = window['__REACT_ROUTER_ASYNC__'].state;
-            if (stateFromServer.error !== null) {
+            this.stateFromServer = window['__REACT_ROUTER_ASYNC__'].state;
+            if (this.stateFromServer.error !== null) {
                 this.state = {
-                    ...stateFromServer,
-                    Component: BrowserRouter.getErrorComponent(stateFromServer.error, this.errors)
+                    ...this.stateFromServer,
+                    Component: BrowserRouter.getErrorComponent(this.stateFromServer.error, this.errors)
                 }
             }
         }
@@ -93,4 +95,16 @@ export default class BrowserRouter extends Router {
     componentWillUnmount() {
         this.unlistenHistroy();
     }
+    render() {
+        return (
+            <div>
+                {this.props.children ? this.props.children : <this.state.Component {...this.state.componentProps} />}
+                {this.stateFromServer !== null ?
+                    <script dangerouslySetInnerHTML={{ __html: `window.__REACT_ROUTER_ASYNC__=${JSON.stringify({
+                        state: this.stateFromServer
+                    })};`}} /> : null
+                }
+            </div>
+        )
+    }
 }

src/router.tsx

@@ -162,14 +162,4 @@ export default class Router extends React.Component<Props, State> {
     getState() {
         return this.state;
     }
-    render() {
-        return (
-            <div>
-                {this.props.children ? this.props.children : <this.state.Component {...this.state.componentProps} />}
-                <script dangerouslySetInnerHTML={{ __html: `window.__REACT_ROUTER_ASYNC__=${JSON.stringify({
-                    state: this.state
-                })};`}} />
-            </div>
-        )
-    }
 }

src/server-router.tsx

@@ -17,4 +17,14 @@ export default class ServerRouter extends Router {
             router: this
         };
     }
+    render() {
+        return (
+            <div>
+                {this.props.children ? this.props.children : <this.state.Component {...this.state.componentProps} />}
+                <script dangerouslySetInnerHTML={{ __html: `window.__REACT_ROUTER_ASYNC__=${JSON.stringify({
+                    state: this.state
+                })};`}} />
+            </div>
+        )
+    }
 }