connected-react-routerを使ってurlを変えたのに表示されるコンポーネントが変わらない

Question

前提・実現したいこと

以下のサイトと全く同じ状況が起きているのですが、自分の場合はもともとswitchを使っていました。
https://teratail.com/questions/216393
他の原因はどこにあるでしょうか。
わかる方がいましたら回答お願いします。

コンソール出力

action @@router/CALL_HISTORY_METHOD @ 23:59:06.455
redux-logger.js:388  prev state {noop: {…}, shopping: {…}, Ranking: {…}, router: {…}}Ranking: {category: undefined, ranking: undefined, error: false}noop: {}router: {location: {…}, action: "POP"}shopping: {categories: Array(3)}__proto__: Object
redux-logger.js:392  action     {type: "@@router/CALL_HISTORY_METHOD", payload: {…}}payload: {method: "push", args: Array(1)}args: ["/category/2502"]method: "push"__proto__: Objecttype: "@@router/CALL_HISTORY_METHOD"__proto__: Object
redux-logger.js:401  next state {noop: {…}, shopping: {…}, Ranking: {…}, router: {…}}Ranking: {category: undefined, ranking: undefined, error: false}noop: {}router: {location: {…}, action: "POP"}shopping: {categories: Array(3)}__proto__: Object
redux-logger.js:377  action @@router/LOCATION_CHANGE @ 23:59:06.457
redux-logger.js:388  prev state {noop: {…}, shopping: {…}, Ranking: {…}, router: {…}}
redux-logger.js:392  action     {type: "@@router/LOCATION_CHANGE", payload: {…}}payload: {location: {…}, action: "PUSH", isFirstRendering: false}type: "@@router/LOCATION_CHANGE"__proto__: Object
redux-logger.js:401  next state {noop: {…}, shopping: {…}, Ranking: {…}, router: {…}}

該当のソースコード

createStore.js

import {
  createStore as reduxCreateStore,
  combineReducers,
  applyMiddleware
} from 'redux';
import logger from 'redux-logger';
import thunk from 'redux-thunk';
import { connectRouter, routerMiddleware } from 'connected-react-router';

import * as reducers from './reducers';

export default function createStore(history) {
  return reduxCreateStore(
    combineReducers({
      ...reducers,
      router: connectRouter(history), //ルーター状態を管理するルーターreducer
    }),
    applyMiddleware(
      logger,
      thunk,
      routerMiddleware(history)
    )
  );
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import createBrowserHistory from 'history/createBrowserHistory';
import App from './App';
import createStore from './createStore';

const history = createBrowserHistory();

//Storeの生成
const store = createStore(history);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

App.js

import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import Ranking from './containers/Ranking';
import Nav from './containers/Nav';
import Reboot from 'material-ui/Reboot';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';

class App extends Component {
  render() {
    return (
      <div className="App" style={{ paddingLeft: 240 }}>
        <Reboot />

        <AppBar style={{ left: 240 }}>
          <Toolbar>
            <Typography type="title" color="inherit">
              Yahoo!ショッピングランキング
            </Typography>
          </Toolbar>
        </AppBar>

        <Nav />

        <div style={{ marginTop: 64, padding: 32 }}>
          <Switch>
            <Route path="/all" component={Ranking} />
            <Route
              path="/category/1"
              render={() => <Redirect to="/all" />}
            />
            <Route
              path="/category/:id"
              render={
                ({ match }) => <Ranking categoryId={match.params.id} />
              }
            />
          </Switch>
        </div>
      </div>
    );
  }
}

export default App;

components/Nav.js

import Drawer from 'material-ui/Drawer';
import List, { ListItem, ListItemText } from 'material-ui/List';
import PropTypes from 'prop-types';
import React from 'react';

export default function Nav({ categories, onClick }) {
  const to = category => (
    category.id === '1'
      ? `/all`
      : `/category/${category.id}`
  );

  return (
    <Drawer type="permanent">
      <List style={{ width: 240 }}>
        {categories.map(category => (
          <ListItem
            button
            key={`menu-item-${category.id}`}
            onClick={() => onClick(to(category))}
          >
            <ListItemText primary={category.name} />
          </ListItem>
        ))}
      </List>
    </Drawer>
  );
}

Nav.propTypes = {
  categories: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired
    })
  ).isRequired,
  onClick: PropTypes.func.isRequired
};

containers/Nav.js

import { connect } from 'react-redux';
import { push } from 'connected-react-router';
import Nav from '../components/Nav';

const mapStateToProps = state => ({
  categories: state.shopping.categories
});

const mapDispatchToProps = dispatch => ({
  onClick(path) {
    dispatch(push(path)); 
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Nav);

reducers/Ranking.js

const getRanking = response => {
  const ranking = [];
  const itemLength = response.ResultSet.totalResultsReturned
  for (let index = 0; index < itemLength; index++) {
    const item = response.ResultSet['0'].Result[index + ''];
    ranking.push({
      code: item.Code,
      name: item.Name,
      url: item.Url,
      imageUrl: item.Image.Medium
    })
  }
  return ranking;
}

const initialState = {
  category: undefined,
  ranking: undefined,
  error: false
};

export default (state = initialState, action) => {
  switch (action.type) {
    case 'START_REQUEST':
      return {
        category: action.payload.category,
        ranking: undefined,
        error: false
      };

    case 'RECEIVE_DATA':
      return action.payload.error
        ? { ...state, error: true }
        : {
          ...state,
          ranking: getRanking(action.payload.response)
        };
    default:
      return state;
  }
}

###試したこと
https://github.com/supasate/connected-react-router/issues/260
上記のサイトにバージョンを6.0.0にダウングレードさせるように記述されていましたが、試してみても変わりませんでした。
react-router-domとconnected-react-routerが依存関係があるようで、上の記事に書かれている場合すべての通りを試してみましたが、変化なしです。

Answer 1

上記の回答は無視してください。
2点ほど確認していただきたいです。
storeの設定は、

// configureStore.js
...
import { createBrowserHistory } from 'history'
import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import createRootReducer from './reducers'
...
export const history = createBrowserHistory()

export default function configureStore(preloadedState) {
  const store = createStore(
    createRootReducer(history), // root reducer with router state
    preloadedState,
    compose(
      applyMiddleware(
        routerMiddleware(history), // for dispatching history actions
        // ... other middlewares ...
      ),
    ),
  )

  return store
}

のようになっていますでしょうか？
また、App.jsでconsole.log(this.props)をしていただきたいです。
ReactはClassのpropsまたはstateが変わった時に再レンダリングします。なので、リンクが変わった際にpropsが変わっているのか確認していただきたいです。

Comments

[aiai8976]

コメントありがとうございます。
それぞれの対応は上に加えました。
確認お願いします。

Answer 2

Nav.jsの

onClick={() => onClick(to(category))}

を、

onClick={() => to(category)}

に変えて見てください。