Implemented react-router v4 to ReactRedux template

templates/ReactReduxSpa/ClientApp/boot-server.tsx

@@ -1,50 +1,46 @@
 import * as React from 'react';
 import { Provider } from 'react-redux';
 import { renderToString } from 'react-dom/server';
-import { match, RouterContext } from 'react-router';
-import createMemoryHistory from 'history/lib/createMemoryHistory';
+import { StaticRouter } from 'react-router-dom';
+import { replace } from "react-router-redux";
+import { createMemoryHistory } from 'history';
 import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
 import routes from './routes';
 import configureStore from './configureStore';
 
 export default createServerRenderer(params => {
     return new Promise<RenderResult>((resolve, reject) => {
-        // Match the incoming request against the list of client-side routes
-        const store = configureStore();
-        match({ routes, location: params.location }, (error, redirectLocation, renderProps: any) => {
-            if (error) {
-                throw error;
-            }
+        // Create memory history to use in the Redux store
+        const history = createMemoryHistory();
+        const store = configureStore(history);
 
-            // If there's a redirection, just send this information back to the host application
-            if (redirectLocation) {
-                resolve({ redirectUrl: redirectLocation.pathname });
-                return;
-            }
+        // Dispatch the current location so that the router knows where to go
+        store.dispatch(replace(params.location));
 
-            // If it didn't match any route, renderProps will be undefined
-            if (!renderProps) {
-                throw new Error(`The location '${ params.url }' doesn't match any route configured in react-router.`);
-            }
+        const context : any = {};
 
-            // Build an instance of the application
-            const app = (
-                <Provider store={ store }>
-                    <RouterContext {...renderProps} />
-                </Provider>
-            );
+        const app = (
+            <Provider store={ store }>
+                <StaticRouter context={ context } location={ params.location.path } children={ routes } />
+            </Provider>
+        );
 
-            // Perform an initial render that will cause any async tasks (e.g., data access) to begin
-            renderToString(app);
+        // Perform an initial render that will cause any async tasks (e.g., data access) to begin
+        renderToString(app);
 
-            // Once the tasks are done, we can perform the final render
-            // We also send the redux store state, so the client can continue execution where the server left off
-            params.domainTasks.then(() => {
-                resolve({
-                    html: renderToString(app),
-                    globals: { initialReduxState: store.getState() }
-                });
-            }, reject); // Also propagate any errors back into the host application
-        });
+        // If there's a redirection, just send this information back to the host application (Maybe improve this?)
+        if (context.url) {
+            resolve({ redirectUrl: context.url });
+            return;
+        }
+        
+        // Once the tasks are done, we can perform the final render
+        // We also send the redux store state, so the client can continue execution where the server left off
+        params.domainTasks.then(() => {
+            resolve({
+                html: renderToString(app),
+                globals: { initialReduxState: store.getState() }
+            });
+        }, reject); // Also propagate any errors back into the host application
     });
 });