Downgrade to react-router v3.0 for better integration with Nioh

package.json

@@ -9,8 +9,7 @@
     "react-flip-move": "2.9.14",
     "react-motion": "^0.5.0",
     "react-redux": "^5.0.5",
-    "react-router": "^4.1.2",
-    "react-router-dom": "4.1.1",
+    "react-router": "3.0.0",
     "redux": "^3.7.1",
     "redux-actions": "^2.0.3",
     "redux-saga": "^0.15.4",

src/components/App/Header.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+
+import logo from './logo-white.png';
+import { HeaderWrapper, Logo } from './style.js';
+
+export default class Header extends Component {
+  render() {
+    return (
+      <HeaderWrapper>
+        <Logo src={logo} alt="logo" />
+        <h2>Simple UI demos</h2>
+      </HeaderWrapper>
+    );
+  }
+}

src/components/App/index.js

@@ -1,14 +1,22 @@
-import React, { Component } from 'react';
-import logo from './logo-white.png';
-import { Header, Logo } from './style.js';
-
-export default class App extends Component {
-  render() {
-    return (
-      <Header>
-        <Logo src={logo} alt="logo" />
-        <h2>Simple UI demos</h2>
-      </Header>
-    );
-  }
-}
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Header from './Header';
+import Nav from '../Nav';
+
+import { Container, ComponentWrapper } from './style';
+
+const App = ({ children }) =>
+  <Container>
+    <Header />
+    <Nav />
+    <ComponentWrapper>
+      {children}
+    </ComponentWrapper>
+  </Container>;
+
+App.propTypes = {
+  children: PropTypes.node
+};
+
+export default App;

src/components/App/style.js

@@ -1,16 +1,16 @@
 import styled from 'styled-components';
 
-const Header = styled.div`
+const HeaderWrapper = styled.div`
   text-align: center;
   background-color: #da3f3d;
   height: 100px;
   color: white;
   flex: 0 1 100%;
-  
+
   h2 {
     display: inline-block;
     margin: 0 10px;
-}
+  }
 `;
 
 const Logo = styled.img`
@@ -18,4 +18,21 @@ const Logo = styled.img`
   vertical-align: middle;
 `;
 
-export { Header, Logo };
+const Container = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  height: 100%;
+`;
+
+const ComponentWrapper = styled.main`
+  display: inline-block;
+  margin: 0;
+  padding: 20px;
+  overflow: hidden;
+
+  @media (min-width: 800px) {
+    width: 70vw;
+  }
+`;
+
+export { HeaderWrapper, Logo, Container, ComponentWrapper };

src/components/Form/Form.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { Motion, spring } from 'react-motion';
 
 import { TextArea, Warning, Input, Label } from './style';

src/components/Nav/NavLink.js

@@ -1,14 +1,18 @@
 // modules/NavLink.js
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import { Link, IndexLink } from 'react-router';
 
 export default class MyNav extends React.Component {
   render() {
-    return (
-      <NavLink
-        {...this.props}
-        activeStyle={{ backgroundColor: '#da3f3d', color: 'white' }}
-      />
-    );
+    const { Index, ...otherProps } = this.props;
+    return Index
+      ? <IndexLink
+          {...otherProps}
+          activeStyle={{ backgroundColor: '#da3f3d', color: 'white' }}
+        />
+      : <Link
+          {...this.props}
+          activeStyle={{ backgroundColor: '#da3f3d', color: 'white' }}
+        />;
   }
 }

src/components/Nav/index.js

@@ -6,7 +6,7 @@ import { NavUl, NavLi } from './style.js';
 const Nav = () =>
   <NavUl>
     <NavLi>
-      <NavLink to="/" exact={true}>
+      <NavLink Index to="/">
         Home
       </NavLink>
     </NavLi>

src/routes.js

@@ -1,9 +1,7 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import { Container, ComponentWrapper } from './style.js';
+import { Router, Route, browserHistory, IndexRoute } from 'react-router';
 
 import App from './components/App';
-import Nav from './components/Nav';
 import Home from './components/Home';
 import ToggleDemo from './components/Toggle';
 import TabViewDemo from './components/Tabs';
@@ -16,27 +14,19 @@ import BurgerMenuDemo from './components/BurgerMenu';
 import NotFound from './components/NotFound';
 
 const Routes = props =>
-  <Router {...props}>
-    <Container>
-      <App />
-      <Nav />
-      <main>
-        <ComponentWrapper>
-          <Switch>
-            <Route path="/" exact component={Home} />
-            <Route path="/toggle" component={ToggleDemo} />
-            <Route path="/tabs" component={TabViewDemo} />
-            <Route path="/counter" component={CounterDemo} />
-            <Route path="/modal" component={ModalDemo} />
-            <Route path="/slideshow" component={SlideShowDemo} />
-            <Route path="/form" component={FormDemo} />
-            <Route path="/fetcher" component={FetcherDemo} />
-            <Route path="/menu" component={BurgerMenuDemo} />
-            <Route component={NotFound} />
-          </Switch>
-        </ComponentWrapper>
-      </main>
-    </Container>
+  <Router {...props} history={browserHistory}>
+    <Route path="/" component={App}>
+      <IndexRoute component={Home} />
+      <Route path="/toggle" component={ToggleDemo} />
+      <Route path="/tabs" component={TabViewDemo} />
+      <Route path="/counter" component={CounterDemo} />
+      <Route path="/modal" component={ModalDemo} />
+      <Route path="/slideshow" component={SlideShowDemo} />
+      <Route path="/form" component={FormDemo} />
+      <Route path="/fetcher" component={FetcherDemo} />
+      <Route path="/menu" component={BurgerMenuDemo} />
+      <Route component={NotFound} />
+    </Route>
   </Router>;
 
 export default Routes;

yarn.lock

@@ -2912,14 +2912,13 @@ [email protected]:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
 
-history@^4.5.1, history@^4.6.0:
-  version "4.6.3"
-  resolved "https://registry.yarnpkg.com/history/-/history-4.6.3.tgz#6d723a8712c581d6bef37e8c26f4aedc6eb86967"
+history@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-3.3.0.tgz#fcedcce8f12975371545d735461033579a6dae9c"
   dependencies:
     invariant "^2.2.1"
     loose-envify "^1.2.0"
-    resolve-pathname "^2.0.0"
-    value-equal "^0.2.0"
+    query-string "^4.2.2"
     warning "^3.0.0"
 
 hmac-drbg@^1.0.0:
@@ -4742,7 +4741,7 @@ [email protected]:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
 
-path-to-regexp@^1.0.1, path-to-regexp@^1.5.3:
+path-to-regexp@^1.0.1:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
   dependencies:
@@ -5202,7 +5201,7 @@ [email protected], qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
 
-query-string@^4.1.0:
+query-string@^4.1.0, query-string@^4.2.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
   dependencies:
@@ -5323,37 +5322,14 @@ react-redux@^5.0.5:
     loose-envify "^1.1.0"
     prop-types "^15.5.10"
 
[email protected]:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.1.1.tgz#3021ade1f2c160af97cf94e25594c5f294583025"
-  dependencies:
-    history "^4.5.1"
-    loose-envify "^1.3.1"
-    prop-types "^15.5.4"
-    react-router "^4.1.1"
-
-react-router@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.1.1.tgz#d448f3b7c1b429a6fbb03395099949c606b1fe95"
-  dependencies:
-    history "^4.6.0"
-    hoist-non-react-statics "^1.2.0"
-    invariant "^2.2.2"
-    loose-envify "^1.3.1"
-    path-to-regexp "^1.5.3"
-    prop-types "^15.5.4"
-    warning "^3.0.0"
-
-react-router@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.1.2.tgz#7ae027341abc42eb08ad9f7a8cac08d0563672ce"
[email protected]:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-3.0.0.tgz#3f313e4dbaf57048c48dd0a8c3cac24d93667dff"
   dependencies:
-    history "^4.6.0"
+    history "^3.0.0"
     hoist-non-react-statics "^1.2.0"
-    invariant "^2.2.2"
-    loose-envify "^1.3.1"
-    path-to-regexp "^1.5.3"
-    prop-types "^15.5.4"
+    invariant "^2.2.1"
+    loose-envify "^1.2.0"
     warning "^3.0.0"
 
 [email protected]:
@@ -5698,10 +5674,6 @@ resolve-from@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
 
-resolve-pathname@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.1.0.tgz#e8358801b86b83b17560d4e3c382d7aef2100944"
-
 [email protected]:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
@@ -6546,10 +6518,6 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "~1.0.0"
     spdx-expression-parse "~1.0.0"
 
-value-equal@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.2.1.tgz#c220a304361fce6994dbbedaa3c7e1a1b895871d"
-
 vary@~1.1.0, vary@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37"