Reagieren Redux und reagieren-router-dom

Ich Lerne, Redux, und mit den neuen Veränderungen reagieren-router-dom, ich bin ein wenig verwirrt.
Ich habe diese Dateien:

Index.js

import React from 'react';
import { Provider } from 'react-redux';
import ReactDOM from 'react-dom';
// import { AppContainer } from 'react-hot-loader';
import App from './containers/App';
import store from './store';

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

App.js

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/actionCreators';
import Main from '../components/Main';

function mapStateToProps(state) {
  return {
    search: state.search,
    navigation: state.navigation,
  };
}
export function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch);
}
const App = connect(mapStateToProps, mapDispatchToProps)(Main);
export default App;

Schließlich Main.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';
import Listing from './Listing';
import SingleListing from './SingleListing';
const Main = () => (
  <Router>
    <div className="wrapper">
     <Header />
      <Route exact path="/" component={Listing} />
      <Route path="/list" component={SingleListing} />
      <Footer />
    </div>
  </Router>
);

export default Main;

Dieser code funktioniert Prima, wenn ich auf localhost:3000/Liste, oder wenn ich auf eine es funktioniert.

Allerdings habe ich das Gefühl, ich mache etwas falsch und das der richtige Weg sollte sein, wickeln Sie Sie in an der Innenseite index.js

so, ich sollte so etwas tun:

<Router>
  <Provider store={store}>
    <App />
  </Provider>,
</Router>   

Dokument.getElementById('root'),

Und dann in Main.js

<div className="wrapper">
  <Header />
  <Route exact path="/" component={Listing} />
  <Route path="/list" component={SingleListing} />
  <Footer />
</div>

Aber wenn ich das Tue, wenn ich direkt auf den link localhost/Liste, ich kann sehen, dass die Komponente, aber wenn ich klicken auf einen link geschieht nichts.

Ich bin verwirrt über, wie man richtig mit dem router mit redux.
Dies ist der code, den ich verwende innen reducers/index.js

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import search from './search';
import navigation from './navigation';

const rootReducer = combineReducers({ search, navigation, routing: routerReducer });

export default rootReducer;

Habe ich recherchiert, diese Website und viele tutorials online und auf youtube, aber ich verstehe nicht, wenn ich Tue, richtig in meinem code, ich weiß, dass es funktioniert, aber ich bin interessiert, ob dies der richtige Weg.
Danke!