reactjs - Cannot connect component inside React Route to redux store

Question

I am trying to connect my component that is placed inside a Route to a redux store, but without any success. Running the program throws an error saying: TypeError: props.setIsLoggedIn is not a function Connecting store to components outside of Route (e.g. MenuBar) works without any problems.

Important part of file containing Routes:

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

Important part of LoginPage file:

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

The redux connect stuff is all fine here - LoginPage will have the setIsLoggedIn prop - you don't show the code for LoginPage but most probably you are just not passing that prop through to LoginForm?

i.e.

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