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

【问题标题】：Cannot connect component inside React Route to redux store无法将 React Route 中的组件连接到 redux 存储
【发布时间】：2021-01-01 02:12:22
【问题描述】：

我正在尝试将放置在 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>

LoginPage 文件的重要部分：

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);

【问题讨论】：

在哪里将setIsLoggedIn 传递给LoginForm 组件？
setIsLoggedIn 是一个动作吗？
setIsLoggedIn 是一个动作创建者，现在我在 LoginPage 文件中，它在 LoginForm 组件之上

标签： reactjs react-redux react-router-dom redux-store

【解决方案1】：

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

即

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

【讨论】：

好的，谢谢！我似乎迷失在自己的源代码中：/