React-redux, не могу использовать соединение с моим root компонентом

Question

Я не могу использовать подключение с экспортом в компоненте приложения. Ошибка не возникает, приложение запускается нормально ... но все мои ссылки на панели навигации перестают работать (???). URL-адрес изменяется, но всегда отображается главная страница, как будто это нарушит маршрутизацию. Вот мой код:

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;

Если я прокомментирую часть «подключения», например:

//export default connect(null, mapDispatchToProps)(App);
export default App;

, все работает нормально, и все мои ссылки работают нормально. Почему я не могу использовать «подключение» в своем компоненте приложения? Я знаю, что я не отправляю какие-либо действия через props, но, насколько я понимаю, он должен работать.

Ниже мой файл index. js, в котором используется компонент th App:

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

Думаю, я понял. Решение заключалось в том, чтобы обернуть мои компоненты App и Layout (макет содержит мои элементы навигации) с помощью withRouter:

export default withRouter(connect(null, mapDispatchToProps)(App));

export default withRouter(connect(mapStateToProps)(Layout));

Answer 2

Я думаю, проблема в вашем mapDispatchToProps:

import {bindActionCreators} from 'redux'
...
const mapDispatchToProps = dispatch => (bindActionCreators({
    actionName: () => ({type:'SOME_ACTION', payload: 'SOME_PAYLOAD'}),
    doLogout: () => actions.logout(),
}, dispatch))

РЕДАКТИРОВАТЬ: внесите эти изменения в свой 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>