无法将 React Route 中的组件连接到 redux 存储

Question

我正在尝试将放置在 Route 中的组件连接到 redux 存储，但没有成功。运行程序抛出一条错误消息：TypeError: props.setIsLoggedIn is not a function 将 store 连接到 Route 之外的组件（例如 MenuBar）没有任何问题。

包含路线的文件的重要部分：

<ThemeProvider theme={Theme}>
          <Provider store = {store}>
            <Router>
              <div  className = {classes.pageLayout}>
                <TopBar />
                <MenuBar />
                <Switch>
                    <Route exact  path ="/" 
                                component={<Home/>}/>
                    <Route exact  path ="/home" 
                                component={<Home/>}/>
                    <Route exact path ="/login"  
                                component= {<LoginPage/>}/>
                </Switch>
            </div>
          </Router>
        </Provider>
</ThemeProvider>

登录页面文件的重要部分：

import { connect } from "react-redux";

const setIsLoggedIn = isLoggedIn => ({
  type: "SET_IS_LOGGED_IN",
  isLoggedIn: isLoggedIn
});

const LoginForm = (props) => {
  props.setIsLoggedIn(true);
  return (<div>Contains some components.</div>);
}

const mapDispatchToProps = {
  setIsLoggedIn
};

export default connect(null, mapDispatchToProps)(LoginPage);

Answer 1

redux connect 的东西在这里都很好 - LoginPage 将有 setIsLoggedIn 道具 - 你没有显示 LoginPage 的代码，但很可能你只是没有将该道具传递给 LoginForm?

即

const LoginPage = (props) => (
  ...
  <LoginForm 
    setIsLoggedIn={props.setIsLoggedIn} 
    ...
  />
  ...
)

无法将 React Route 中的组件连接到 redux 存储

Cannot connect component inside React Route to redux store

reactjs

react-redux

react-router-dom

redux-store