Question

我无法在App组件中使用connect进行导出。没有引发任何错误，该应用正常启动...但是我在导航栏中的所有链接都停止工作（???）。 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;

一切正常，我所有的链接都工作正常。为什么不能在我的App组件中使用“连接”？我知道我不会通过道具调度任何动作，但是就我而言，它仍然可以工作。

下面是我的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”包装我的App和Layout组件（布局保存我的导航项）：

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

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

React-redux，不能与我的根组件一起使用connect

2 个答案: