Implemented react-router-dom v4

Author: Keven van Zuijlen

templates/ReactSpa/ClientApp/boot.tsx

@@ -2,12 +2,12 @@ import './css/site.css';
 import 'bootstrap';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { browserHistory, Router } from 'react-router';
+import { BrowserRouter as Router } from 'react-router-dom';
 import routes from './routes';
 
 // This code starts up the React app when it runs in a browser. It sets up the routing configuration
 // and injects the app into a DOM element.
 ReactDOM.render(
-    <Router history={ browserHistory } children={ routes } />,
+    <Router children={ routes } />,
     document.getElementById('react-app')
 );

templates/ReactSpa/ClientApp/components/Layout.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { NavMenu } from './NavMenu';
 
 export interface LayoutProps {
-    body: React.ReactElement<any>;
+    children?: React.ReactNode;
 }
 
 export class Layout extends React.Component<LayoutProps, {}> {
@@ -13,7 +13,7 @@ export class Layout extends React.Component<LayoutProps, {}> {
                     <NavMenu />
                 </div>
                 <div className='col-sm-9'>
-                    { this.props.body }
+                    { this.props.children }
                 </div>
             </div>
         </div>;

templates/ReactSpa/ClientApp/components/NavMenu.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router';
+import { Link, NavLink } from 'react-router-dom';
 
 export class NavMenu extends React.Component<{}, {}> {
     public render() {
@@ -18,19 +18,19 @@ export class NavMenu extends React.Component<{}, {}> {
                 <div className='navbar-collapse collapse'>
                     <ul className='nav navbar-nav'>
                         <li>
-                            <Link to={ '/' } activeClassName='active'>
+                            <NavLink to={ '/' } exact activeClassName='active'>
                                 <span className='glyphicon glyphicon-home'></span> Home
-                            </Link>
+                            </NavLink>
                         </li>
                         <li>
-                            <Link to={ '/counter' } activeClassName='active'>
+                            <NavLink to={ '/counter' } activeClassName='active'>
                                 <span className='glyphicon glyphicon-education'></span> Counter
-                            </Link>
+                            </NavLink>
                         </li>
                         <li>
-                            <Link to={ '/fetchdata' } activeClassName='active'>
+                            <NavLink to={ '/fetchdata' } activeClassName='active'>
                                 <span className='glyphicon glyphicon-th-list'></span> Fetch data
-                            </Link>
+                            </NavLink>
                         </li>
                     </ul>
                 </div>

templates/ReactSpa/ClientApp/routes.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { Router, Route, HistoryBase } from 'react-router';
+import { Route } from 'react-router-dom';
 import { Layout } from './components/Layout';
 import { Home } from './components/Home';
 import { FetchData } from './components/FetchData';
 import { Counter } from './components/Counter';
 
-export default <Route component={ Layout }>
-    <Route path='/' components={{ body: Home }} />
-    <Route path='/counter' components={{ body: Counter }} />
-    <Route path='/fetchdata' components={{ body: FetchData }} />
-</Route>;
+export default <Layout>
+    <Route exact path='/' component={ Home } />
+    <Route path='/counter' component={ Counter } />
+    <Route path='/fetchdata' component={ FetchData } />
+</Layout>;
 
 // Allow Hot Module Reloading
 declare var module: any;