Implemented react-router v4 to ReactRedux template

templates/ReactReduxSpa/ClientApp/components/Counter.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router';
+import { Link, RouteComponentProps } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { ApplicationState }  from '../store';
 import * as CounterStore from '../store/Counter';
@@ -22,7 +22,7 @@ class Counter extends React.Component<CounterProps, {}> {
 }
 
 // Wire up the React component to the Redux store
-export default connect(
+export default connect<CounterStore.CounterState, {}, RouteComponentProps<{}>>(
     (state: ApplicationState) => state.counter, // Selects which state properties are merged into the component's props
     CounterStore.actionCreators                 // Selects which action creators are merged into the component's props
 )(Counter);

templates/ReactReduxSpa/ClientApp/components/FetchData.tsx

@@ -1,25 +1,25 @@
 import * as React from 'react';
-import { Link } from 'react-router';
+import { Link, RouteComponentProps } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { ApplicationState }  from '../store';
 import * as WeatherForecastsState from '../store/WeatherForecasts';
 
 // At runtime, Redux will merge together...
 type WeatherForecastProps =
-    WeatherForecastsState.WeatherForecastsState     // ... state we've requested from the Redux store
-    & typeof WeatherForecastsState.actionCreators   // ... plus action creators we've requested
-    & { params: { startDateIndex: string } };       // ... plus incoming routing parameters
+    WeatherForecastsState.WeatherForecastsState        // ... state we've requested from the Redux store
+    & typeof WeatherForecastsState.actionCreators      // ... plus action creators we've requested
+    & RouteComponentProps<{ startDateIndex: string }>; // ... plus incoming routing parameters   
 
 class FetchData extends React.Component<WeatherForecastProps, {}> {
     componentWillMount() {
         // This method runs when the component is first added to the page
-        let startDateIndex = parseInt(this.props.params.startDateIndex) || 0;
+        let startDateIndex = parseInt(this.props.match.params.startDateIndex) || 0;
         this.props.requestWeatherForecasts(startDateIndex);
     }
 
     componentWillReceiveProps(nextProps: WeatherForecastProps) {
         // This method runs when incoming props (e.g., route params) change
-        let startDateIndex = parseInt(nextProps.params.startDateIndex) || 0;
+        let startDateIndex = parseInt(nextProps.match.params.startDateIndex) || 0;
         this.props.requestWeatherForecasts(startDateIndex);
     }
 
@@ -67,7 +67,7 @@ class FetchData extends React.Component<WeatherForecastProps, {}> {
     }
 }
 
-export default connect(
+export default connect<WeatherForecastsState.WeatherForecastsState, {}, WeatherForecastProps>(
     (state: ApplicationState) => state.weatherForecasts, // Selects which state properties are merged into the component's props
     WeatherForecastsState.actionCreators                 // Selects which action creators are merged into the component's props
 )(FetchData);

templates/ReactReduxSpa/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.ReactElement<any>;
 }
 
 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/ReactReduxSpa/ClientApp/components/NavMenu.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router';
+import { NavLink, Link } 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 exact to={ '/' } 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>