React-redux，无法与我的根组件连接

Question

我无法在 App 组件中使用 connect, with export。没有错误被抛出，应用程序正常启动......但我在导航栏中的所有链接都停止工作（？？？）。 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;

如果我评论 'connect' 部分，像这样：

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

一切正常，我的所有链接都工作正常。为什么我不能在我的 App 组件中使用 'connect'？我知道我不会通过 props 发送任何动作，但就我而言，它应该仍然有效。

下面是我的 index.js 文件，它使用了 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

我觉得是你的问题 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>

Answer 2

我想我明白了。解决方案是用 "withRouter":

包装我的应用程序和布局组件（布局包含我的导航项）

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

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

React-redux，无法与我的根组件连接

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

connect

reactjs

redux