Add react router

Thomas Roger Lux · Thomas Roger Lux · commit 9848ac9456dd · 2018-09-26T23:12:08.000+02:00
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
         "react": "^16.4.1",
         "react-dom": "^16.4.1",
         "react-redux": "^5.0.7",
+        "react-router-dom": "^4.3.1",
         "redux": "^4.0.0",
         "styled-components": "^3.4.9"
     },
@@ -21,6 +22,7 @@
         "@types/react": "^16.4.1",
         "@types/react-dom": "^16.0.6",
         "@types/react-redux": "^6.0.2",
+        "@types/react-router-dom": "^4.3.1",
         "ts-loader": "^4.4.1",
         "typescript": "^2.9.2",
         "webpack": "^4.12.1",
diff --git a/src/client/index.tsx b/src/client/index.tsx
@@ -2,20 +2,23 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import * as Redux from "redux";
 import * as ReactRedux from "react-redux";
+import { BrowserRouter as Router } from "react-router-dom";
 
 import App from "common/App";
 import { changeTitle } from "common/redux/reducer/title";
 
 //@ts-ignore
-const preloadedState = window["PRELOADED_STATE"];
+const preloadedState = window["__PRELOADED_STATE__"];
 //@ts-ignore
-delete window["PRELOADED_STATE"]; 
+delete window["__PRELOADED_STATE__"]; 
 
 const store = Redux.createStore(changeTitle, preloadedState)
 
 ReactDOM.hydrate(
     <ReactRedux.Provider store={store}>
-        <App />
+        <Router>
+            <App />
+        </Router>
     </ReactRedux.Provider>,
     document.getElementById("root")
 );
diff --git a/src/server/index.tsx b/src/server/index.tsx
@@ -4,6 +4,7 @@ import * as Express from "express";
 import * as Redux from "redux";
 import * as ReactRedux from "react-redux";
 import { ServerStyleSheet } from "styled-components";
+import { StaticRouter as Router } from "react-router-dom";
 
 import App from "common/App";
 import { changeTitle } from "common/redux/reducer/title";
@@ -16,12 +17,14 @@ function main() {
 
     express.use(Express.static("build"));
 
-    express.get("/", (req, res, next) => {
+    express.get("/*", (req, res, next) => {
 
         const sheet = new ServerStyleSheet()
         const html = ReactDOM.renderToString(sheet.collectStyles(
             <ReactRedux.Provider store={store}>
-                <App />
+                <Router location={req.path} context={{}}>
+                    <App />
+                </Router>
             </ReactRedux.Provider>
         ));
 
@@ -39,7 +42,7 @@ function main() {
                 <body>
                     <div id="root">${html}</div>
                     <script>
-                        window["PRELOADED_STATE"] = ${preloadedState}
+                        window["__PRELOADED_STATE__"] = ${preloadedState}
                     </script>
                     <script type="application/javascript" src="bundle.js"></script>
                     ${styleTags}
