Implemented react-router v4 to ReactRedux template

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);