convert to typescript - react-router upgrade to 4

app/Wrapper.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import Navbar from './components/Navbar/Navbar';
-
-//styling
-import './scss/index.scss';
-
-export default class Wrapper extends React.Component {
-
-    render() {
-        return (
-            <div>
-                <Navbar/>
-                {this.props.children}
-            </div>
-        );
-    }
-}
-
-Wrapper.propTypes = {
-    children: React.PropTypes.node,
-};

app/Wrapper.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+
+import Navbar from './components/Navbar/Navbar';
+import Home from './pages/Home/Home';
+import NotFound from './pages/NotFound/NotFound';
+
+//styling
+import './scss/index.scss';
+
+interface Props {
+    
+}
+
+interface State {
+    
+}
+
+export default class Wrapper extends React.Component<Props, State> {
+
+    render() {
+        return (
+            <BrowserRouter>
+                <div>
+                    <Navbar/>
+                    <Switch>
+                        <Route exact path="/" component={Home}/>
+                        <Route component={NotFound}/>
+                    </Switch>
+                </div>
+            </BrowserRouter>
+        );
+    }
+}

app/app.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Router, Route, IndexRoute, browserHistory } from 'react-router';
-
-import Wrapper from './Wrapper';
-import NotFound from './pages/NotFound/NotFound';
-
-//pages
-import Home from './pages/Home/Home';
-
-ReactDOM.render(
-    <Router history={browserHistory}>
-        <Route path="/" component={Wrapper}>
-            <IndexRoute component={Home}/>
-            <Route path="*" component={NotFound}/>
-        </Route>
-    </Router>
-, document.getElementById('app'));

app/app.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Wrapper from './Wrapper';
+
+ReactDOM.render( <Wrapper/>
+, document.getElementById('app'));

app/components/Navbar/Navbar.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router';
-
-import './Navbar.scss';
-
-export default class Navbar extends React.Component {
-
-    render() {
-        return (
-            <div className="Navbar">
-                <div className="Navbar__header">
-                    <span>React Webpack 2 Seed</span>
-                    <a href="https://github.com/mgerb/react-webpack2-seed">GitHub
-                        <i className="fa fa-github" aria-hidden="true"/>
-                    </a>
-                </div>
-                
-                <div className="Navbar__nav">
-                    <Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Home</Link>
-                    <Link to="/new" className="Navbar__item" activeClassName="Navbar__item--active">New</Link>
-                </div>
-            </div>
-        );
-    }
-}
-
-Navbar.propTypes = {
-    children: React.PropTypes.node,
-};

app/components/Navbar/Navbar.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+import './Navbar.scss';
+
+interface Props {
+    
+}
+
+interface State {
+    
+}
+
+export default class Navbar extends React.Component<Props, State> {
+
+    constructor(props: Props) {
+        super(props);
+    }    
+
+    render() {
+        return (
+            <div className="Navbar">
+                <div className="Navbar__header">
+                    <span>React Starter</span>
+                    <a href="https://github.com/mgerb/react-webpack2-seed">GitHub
+                        <i className="fa fa-github" aria-hidden="true"/>
+                    </a>
+                </div>
+                
+                <div className="Navbar__nav">
+                    <NavLink to="/" className="Navbar__item" exact activeClassName="Navbar__item--active">Home</NavLink>
+                    <NavLink to="/new" className="Navbar__item" exact activeClassName="Navbar__item--active">New</NavLink>
+                </div>
+            </div>
+        );
+    }
+}
+

app/pages/Home/Home.js

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import './Home.scss';
-
-export default class Home extends React.Component {
-
-    render() {
-        return (
-            <div className="Home">
-                test 123
-            </div>
-        );
-    }
-}
-

app/pages/Home/Home.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+
+import './Home.scss';
+
+interface Props extends RouteComponentProps<any> {
+
+}
+
+interface State {
+
+}
+
+export default class Home extends React.Component<Props, State> {
+
+    constructor(props: Props){
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className="Home">
+                test 123
+            </div>
+        );
+    }
+}
+

app/pages/NotFound/NotFound.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import './NotFound.scss';
-
-export default class Default extends React.Component {
-    render() {
-        return (
-            <div className="NotFound">
-                404 Not Found
-            </div>
-        );
-    }
-}

app/pages/NotFound/NotFound.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+
+import './NotFound.scss';
+
+interface Props extends RouteComponentProps<any> {
+
+}
+
+
+interface State {
+
+}
+
+export default class NotFound extends React.Component<Props, State> {
+
+    constructor(props: Props){
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className="NotFound">
+                404 Not Found
+            </div>
+        );
+    }
+}