Issue with programmatically changing routes

First off, thanks for creating a clean and well-documented starter app. We are in the process of migrating our existing code to use the tools provided here.

We are running into an issue with React Router v4 when trying to navigate to another route programmatically via push. At first we tried history.push(...), but that gave us errors saying push was undefined.

After looking through the issues, we found a thread that’s relevant: #36. I think the issue was made before the full React Router v4 implementation was made to the boilerplate, but we went ahead with attempting the solution anyway. We added this to a connected component:

import { push } from 'react-router-redux'
...
const mapDispatchToProps = (dispatch) => {
  return {
    push: v => dispatch(push(v)),
    ...
  }
};

And tried changing routes via

this.props.push('/newroute')

Although the browser’s URL bar changes location, but the page does not update. Can anyone tell me what’s missing here?

---

Steps to reproduce:

1. Replace ./src/containers/Home/index.js with the following:

/* eslint-disable react/sort-comp */
/* @flow */

import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import type { Connector } from 'react-redux';
import Helmet from 'react-helmet';
import { push } from 'react-router-redux';

import * as action from './action';
import type { Home as HomeType, Dispatch, Reducer } from '../../types';
import UserList from '../../components/UserList';
import styles from './styles.scss';

type Props = {
  home: HomeType,
  fetchUsersIfNeeded: () => void,
  push: () => void,
};

// Export this for unit testing more easily
export class Home extends PureComponent {
  props: Props;

  static defaultProps: {
    home: {
      readyStatus: 'USERS_INVALID',
      list: null,
    },
    fetchUsersIfNeeded: () => {},
  };

  componentDidMount() {
    this.props.fetchUsersIfNeeded();
  }

  renderUserList = () => {
    const { home } = this.props;

    if (!home.readyStatus || home.readyStatus === action.USERS_INVALID ||
      home.readyStatus === action.USERS_REQUESTING) {
      return <p>Loading...</p>;
    }

    if (home.readyStatus === action.USERS_FAILURE) {
      return <p>Oops, Failed to load list!</p>;
    }

    return <UserList list={home.list} />;
  }

  render() {
    return (
      <div className={styles.Home}>
        <Helmet title="Home" />
        {this.renderUserList()}
        <button onClick={() => this.props.push('/UserInfo/6')}>Click this button</button>
      </div>
    );
  }
}

const connector: Connector<{}, Props> = connect(
  ({ home }: Reducer) => ({ home }),
  (dispatch: Dispatch) => ({
    fetchUsersIfNeeded: () => dispatch(action.fetchUsersIfNeeded()),
    push: a => dispatch(push(a)),
  }),
);

export default connector(Home);

1. Run the project and click the “Click this button”
2. URL will change but the component won’t update

[danyim]

Great. Thanks for fixing and maintaining this boilerplate!

[wellyshen]

@danyim Thanks man, it really help me 😃