React + ReduxでCould not find "store" in the context of "Connect(Nav)". が出ます。

翔泳社の「React入門」という本に従い、React + Redux + react-router-dom + connected-react-routerを使ってウェブアプリを作ったのですが、下のようなエラーが出て実行できません。

ネットでも同じエラーの質問が多々ありましたが、どれを試してみても解決できませんでした。

解決策がわかる方、教えていただけないでしょうか？

Could not find "store" in the context of "Connect(Nav)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Nav) in connect options.

バージョンは下のとおりです。
"connected-react-router": "^6.4.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^6.0.0",
"react-router-dom": "^5.0.1",

ソースコード

index.js

javascript
1import React from 'react';
2import ReactDOM from 'react-dom';
3import { Provider } from 'react-redux';
4import { ConnectedRouter } from 'connected-react-router';
5import createBrowserHistory from 'history/createBrowserHistory';
6import './index.css';
7import App from './App';
8import * as serviceWorker from './serviceWorker';
9import createStore from './createStore';
10
11// historyインスタンスの作成
12const history = createBrowserHistory();
13
14// storeの作成
15const store = createStore(history);
16
17ReactDOM.render(
18    <Provider store={store}>
19        <ConnectedRouter history={history}>
20            <App />
21        </ConnectedRouter>
22    </Provider>
23, document.getElementById('root'));
24
25serviceWorker.unregister();
26

App.js

javascript
1import React from 'react';
2import { Route, Link } from 'react-router-dom';
3import Ranking from './containers/Ranking';
4import Nav from './containers/Nav';
5
6function App() {
7  return (
8    <div className="App">
9      <Nav />
10
11      <Route path="/all" component={Ranking}></Route>
12      <Route
13        path="/category/:id"
14        render={
15          ({match}) => <Ranking categoryId={match.params.id}></Ranking>}
16        ></Route>
17    </div>
18  );
19}
20
21export default App;

createStore.js

javascript
1import {
2    createStore as reduxCreateStore,
3    combineReducers,
4    applyMiddleware,
5} from 'redux';
6import logger from 'redux-logger';
7import thunk from 'redux-thunk';
8import { connectRouter, routerMiddleware } from 'connected-react-router';
9
10import * as reducers from './reducers';
11
12// historyはsrc/index.jsから渡す
13export default function createStore(history) {
14    return reduxCreateStore(
15        combineReducers({
16            ...reducers,
17            router: connectRouter(history),
18        }),
19        applyMiddleware(
20            logger,
21            thunk,
22            routerMiddleware(history)
23        )
24    );
25}

containers/Nav.js

javascript
1import { connect } from 'react-redux';
2import Nav from '../components/Nav';
3
4const mapStateToProps = state => ({
5    categories: state.shopping.categories
6});
7
8export default connect(mapStateToProps)(Nav);
9

components/Nav.js

Javascript
1import React from 'react';
2import PropTypes from 'prop-types';
3import { Link } from 'react-router-dom';
4
5export default function Nav({ categories }) {
6    const to = category => (
7        category.id === '1' ?
8        'all' :
9        `/category/${category.id}`
10    );
11
12    return (
13        <ul>
14            {categories.map(category => (
15                <li key={`nav-item-${category.id}`}>
16                    <Link to={to(category)}></Link>
17                </li>
18            ))}
19        </ul>
20    );
21}
22
23Nav.propTypes = {
24    categories: PropTypes.arrayOf(
25        PropTypes.shape({
26            id: PropTypes.string.isRequired,
27            name: PropTypes.string.isRequired,
28        })
29    ).isRequired
30};