ルートコンポーネントでconnectを使うと上手くルーティングできない

ReactReduxを使い始めました。

js
1import React, { Component } from 'react';
2import { Switch, Route, Redirect, Link } from 'react-router-dom';
3import UserOnly from './containers/UserOnly';
4import Top from './containers/Top';
5import Auth from './containers/Auth';
6
7export default class App extends Component {
8  render() {
9    return (
10      <div className="App">
11        <ul>
12          <li><Link to="/">トップページ</Link></li>
13          <li><Link to="/home">ユーザ専用ページ</Link></li>
14        </ul>
15        <Switch>
16          <Route exact path="/" component={Top} />
17          <Auth>
18            <Route exact path="/home" component={UserOnly} />
19          </Auth>
20        </Switch>
21      </div>
22    );
23  }
24}
25

このようになっているルートコンポーネントを、

js
1import React, { Component } from 'react';
2import { Switch, Route, Redirect, Link } from 'react-router-dom';
3import UserOnly from './containers/UserOnly';
4import Top from './containers/Top';
5import Auth from './containers/Auth';
6import { connect } from 'react-redux';
7import * as actions from '../actions/user';
8
9class App extends Component {
10  componentDidMount() {
11    this.props.onAuthStateChanged();
12  }
13  render() {
14    return (
15      <div className="App">
16        <ul>
17          <li><Link to="/">トップページ</Link></li>
18          <li><Link to="/home">ユーザ専用ページ</Link></li>
19        </ul>
20        <Switch>
21          <Route exact path="/" component={Top} />
22          <Auth>
23            <Route exact path="/home" component={UserOnly} />
24          </Auth>
25        </Switch>
26      </div>
27    );
28  }
29}
30
31const mapStateToProps = (state) => ({
32});
33
34const mapDispatchToProps = dispatch => ({
35  onAuthStateChanged() {
36    dispatch(actions.onAuthStateChanged());
37  }
38});
39
40export default connect(mapStateToProps, mapDispatchToProps)(App);

このようにしたいのですが、これだとルーティングが上手く行きません。
ルートコンポーネントはそもそもコンテナにしてはいけないのでしょうか？
だとしたら、どのように書くのがベストなのでしょうか？
よろしくお願いします。

ちなみに、index.jsはこんなかんじです。

js
1import React from 'react';
2import ReactDOM from 'react-dom';
3import { Provider } from 'react-redux';
4import { ConnectedRouter } from 'react-router-redux';
5import { history } from './history';
6import App from './App';
7import registerServiceWorker from './registerServiceWorker';
8import configureStore from './configureStore';
9
10const store = configureStore();
11
12ReactDOM.render(
13  <Provider store={store}>
14    <ConnectedRouter history={history}>
15      <App />
16    </ConnectedRouter>
17  </Provider>,
18  document.getElementById('root')
19);
20
21registerServiceWorker();