title: react router redux is not rendered on props changing
body: <p>I'm struggling on using react router redux and everything is fine except rendering on props changing.</p>
  
  <p>Index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import {Provider} from 'react-redux';
  import {createStore, combineReducers, applyMiddleware} from 'redux';
  import {Router, Route, browserHistory} from 'react-router';
  import { syncHistoryWithStore, routerReducer, routerMiddleware } from 'react-router-redux';
  import App from './app';
  import Sign from '../sign/app';
  import SignInfo from '../sign/redux/reducer';
  
  let store = createStore(
    combineReducers({
      SignInfo,
      routing: routerReducer
    }),
  );
  
  const history = syncHistoryWithStore(browserHistory, store);
  
  class Index extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      console.log('root')
      return (
        &lt;Provider store={store}&gt;
          &lt;Router history={history}&gt;
            &lt;Route path="/" component={App}/&gt;
            &lt;Route path="/sign" component={Sign}/&gt;
          &lt;/Router&gt;
        &lt;/Provider&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;Index/&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>sign.js</p>
  
  <pre><code>import React from 'react';
  import {connect} from 'react-redux';
  import Belle from 'belle';
  import {Grid, Row, Col} from 'react-flexbox-grid';
  import { withRouter } from 'react-router';
  import SignPaze1 from './signPaze1'
  
  class App extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      const mainCardStyle = {
        border: '1px solid #aaa',
      }
      return (
  
        &lt;div className="sign-page"&gt;
          &lt;SignPaze1/&gt;
        &lt;/div&gt;
      )
    }
  }
  
  function mapStateToProps(state) {
    return {
    }
  }
  
  export default withRouter(connect(mapStateToProps)(App));
  </code></pre>
  
  <p>signPaze1.js</p>
  
  <pre><code>import React from 'react';
  import { bindActionCreators } from 'redux';
  import {connect} from 'react-redux';
  import Belle from 'belle';
  import { withRouter } from 'react-router';
  import {Grid, Row, Col} from 'react-flexbox-grid';
  
  import {handleSignInput} from './redux/action';
  
  class SignPaze1 extends React.Component {
    constructor(props) {
      super(props);
  
      this.handleInputValue = this.handleInputValue.bind(this);
  
    }
  
    handleInputValue(e) {
      let {dispatch} = this.props;
      console.log('on render')
      const action = bindActionCreators(handleSignInput, dispatch)
      action(e.target.id, e.target.value);
    }
    render() {
      let signData = this.props.signData;
      let mainCardStyle = {
        border: '1px solid #aaa',
      }
      return (
        &lt;Grid&gt;
          &lt;Row&gt;
            &lt;Col xs={12}&gt;
              &lt;Belle.Card style={mainCardStyle}&gt;
                &lt;Row center="md"&gt;
                  &lt;Col xs={12} sm={6} md={4} lg={3}
                       className="input-group"&gt;
                    &lt;input type="text"
                           id="company_number"
                           value={signData.company_number}
                           onChange={this.handleInputValue}/&gt;
                  &lt;/Col&gt;
                  &lt;Col xs={12} sm={6} md={4} lg={3}
                       mdOffset={1} lgOffset={2}
                       className="input-group"&gt;
                    &lt;Belle.TextInput
                      onUpdate={this.handleInputValue.bind(this, 'data')}/&gt;
                  &lt;/Col&gt;
                &lt;/Row&gt;
                &lt;Row center="md"&gt;
                  &lt;Col xs={12} sm={6} md={4} lg={3}
                       className="input-group"&gt;
                    &lt;Belle.TextInput
                      onUpdate={this.handleInputValue.bind(this, 'da2')}/&gt;
                  &lt;/Col&gt;
                  &lt;Col xs={12} sm={6} md={4} lg={3}
                       mdOffset={1} lgOffset={2}
                       className="input-group"&gt;
                    &lt;Belle.TextInput
                      onUpdate={this.handleInputValue.bind(this, 'dat3')}/&gt;
                  &lt;/Col&gt;
                &lt;/Row&gt;
              &lt;/Belle.Card&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Grid&gt;
      )
    }
  }
  
  function mapStateToProps(state) {
    console.log(state.SignInfo);
    return {
      signData: state.SignInfo.signData,
    }
  }
  
  export default withRouter(connect(mapStateToProps)(SignPaze1));
  </code></pre>
  
  <p>reducer.js</p>
  
  <pre><code>import {HANDLE_SIGN_INPUT} from './action';
  
  const initialMainState = {
    signData: {
      company_number: 'asdas|',
      company_name: '',
      username: '',
      email: '',
      email_confirm: '',
      password: '',
      password_confirm: '',
    }
  }
  
  function SignInfo(state = initialMainState, action) {
    let newVal = {};
    switch (action.type) {
      case HANDLE_SIGN_INPUT:
        newVal = Object.assign({}, state);
        newVal.signData[action.target] = action.value;
        return newVal;
      default:
        return state;
    }
  }
  
  export default SignInfo;
  </code></pre>
  
  <p>someone says that add <code>withRouter</code> function on export line will fix this error, but it doesn't. (<a href="https://github.com/ReactTraining/react-router/issues/4671" rel="nofollow noreferrer">here</a>). However is normally render again when state which is member of <code>SignPaze1</code> is changed.</p>
  
  <p>How can I fix this problem causd by react-router-redux?</p>
  
  <p><strong>edit</strong></p>
  
  <p>action.js</p>
  
  <pre><code>export const HANDLE_SIGN_INPUT = 'HANDLE_SIGN_INPUT';
  
  export function handleSignInput(target, value){
    return {
      type: HANDLE_SIGN_INPUT,
      target: target,
      value: value,
    }
  }
  </code></pre>