React-redux, can't use connect with my root component - reactjs

Question

I can't use connect, with export in App component. No error is thrown, the app starts normally... but all my links in my navbar stop to work (???). The url changes, but the main page is always displayed, like it would break the routing. Here is my code:
import { Route, Switch, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import Layout from './hoc/Layout/Layout';
import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';
import Checkout from './containers/Checkout/Checkout';
import Orders from './containers/Orders/Orders';
import Auth from './containers/Auth/Auth';
import * as actions from './store/actions'
class App extends Component {
render () {
return (
<div>
<Layout>
<Switch>
<Route path="/checkout" component={Checkout} />
<Route path="/orders" component={Orders} />
<Route path="/auth" component={Auth} />
<Route path="/" exact component={BurgerBuilder} />
</Switch>
</Layout>
</div>
);
}
}
const mapDispatchToProps = dispatch => {
return {
anything: ()=>dispatch(actions.logout())
}
};
export default connect(null, mapDispatchToProps)(App);
//export default App;
If I comment the 'connect' part, like this:
//export default connect(null, mapDispatchToProps)(App);
export default App;
everything runs ok and all my links are working fine. Why can't I use 'connect' in my App component? I know I'm not dispatching any actions through props, but it should work nontheless, as far as I'm concerned.
Below is my index.js file, which uses th App component:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import burgerBuilderReducer from './store/reducers/burgerBuilder';
import orderReducer from './store/reducers/order';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const rootReducer = combineReducers({
burgerBuilder: burgerBuilderReducer,
order: orderReducer
});
const store = createStore(rootReducer, composeEnhancers(
applyMiddleware(thunk)
));
const app = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
ReactDOM.render( app, document.getElementById( 'root' ) );
registerServiceWorker();

Answer 1

I think the problem is your mapDispatchToProps:
import {bindActionCreators} from 'redux'
...
const mapDispatchToProps = dispatch => (bindActionCreators({
actionName: () => ({type:'SOME_ACTION', payload: 'SOME_PAYLOAD'}),
doLogout: () => actions.logout(),
}, dispatch))
EDIT: Do this changes to your App.js
<BrowserRouter>
<Switch>
<Route path="/checkout" component={Checkout} />
<Route path="/orders" component={Orders} />
<Route path="/auth" component={Auth} />
<Route path="/" exact component={BurgerBuilder} />
</Switch>
</BrowserRouter>

Answer 2

I think I got it. The solution was to wrap both my App and Layout components (layout holds my navigation items) with "withRouter":
export default withRouter(connect(null, mapDispatchToProps)(App));
export default withRouter(connect(mapStateToProps)(Layout));