Fix react-router-dom for server-side rendering

packages/client/src/renderer/ClientRenderer.tsx

@@ -5,6 +5,8 @@ import {IClientConfig} from './IClientConfig'
 import {IRenderer} from './IRenderer'
 import {IStoreFactory} from './IStoreFactory'
 import {Provider} from 'react-redux'
+import {Router} from 'react-router-dom'
+import {createBrowserHistory} from 'history'
 
 export interface IClientRendererParams<State, A extends Action> {
   readonly createStore: IStoreFactory<State, A | any>,
@@ -16,6 +18,7 @@ export class ClientRenderer<State, A extends Action> implements IRenderer {
   constructor(readonly params: IClientRendererParams<State, A>) {}
 
   render(
+    url: string,
     config = (window as any).__APP_CONFIG__ as IClientConfig,
     state = (window as any).__PRELOADED_STATE__,
   ) {
@@ -25,11 +28,17 @@ export class ClientRenderer<State, A extends Action> implements IRenderer {
       target = document.getElementById('container'),
     } = this.params
 
+    const history = createBrowserHistory({
+      basename: config.baseUrl,
+    })
+
     if (state) {
       const store = createStore(state)
       ReactDOM.hydrate(
         <Provider store={store}>
-          <RootComponent config={config} />
+          <Router history={history}>
+            <RootComponent config={config} />
+          </Router>
         </Provider>,
         target,
       )
@@ -37,7 +46,9 @@ export class ClientRenderer<State, A extends Action> implements IRenderer {
       const store = createStore()
       ReactDOM.render(
         <Provider store={store}>
-          <RootComponent config={config} />
+          <Router history={history}>
+            <RootComponent config={config} />
+          </Router>
         </Provider>,
         target,
       )

packages/client/src/renderer/IRenderer.ts

@@ -1,5 +1,5 @@
 import {IClientConfig} from './IClientConfig'
 
 export interface IRenderer {
-  render(config: IClientConfig, state?: any): any
+  render(url: string, config: IClientConfig, state?: any): any
 }

packages/client/src/renderer/ServerRenderer.tsx

@@ -4,6 +4,7 @@ import {IClientConfig} from './IClientConfig'
 import {IRenderer} from './IRenderer'
 import {IStoreFactory} from './IStoreFactory'
 import {Provider} from 'react-redux'
+import {StaticRouter} from 'react-router-dom'
 import {renderToNodeStream} from 'react-dom/server'
 
 export class ServerRenderer<State, A extends Action> implements IRenderer {
@@ -11,13 +12,16 @@ export class ServerRenderer<State, A extends Action> implements IRenderer {
     readonly createStore: IStoreFactory<State, A | any>,
     readonly RootComponent: React.ComponentType<{config: IClientConfig}>,
   ) {}
-  render(config: IClientConfig, state?: any) {
+  render(url: string, config: IClientConfig, state?: any) {
     const {RootComponent} = this
     const store = this.createStore(state)
 
+    const context = {}
     const stream = renderToNodeStream(
       <Provider store={store}>
-        <RootComponent config={config} />
+        <StaticRouter location={url} context={context} >
+          <RootComponent config={config} />
+        </StaticRouter>
       </Provider>,
     )
     return stream