reactjs - Can't get props from Redux Connect() in React Router 4 nested route -

i'm trying access props redux connect() in nested route. can't work..

i have following components:

main.js const initstate = {};

const history = createbrowserhistory(); const store = configurestore(initstate, history);  reactdom.render(   <provider store={store}>     <connectedrouter history={history}>       <app />     </connectedrouter>   </provider>,   document.getelementbyid('root') ); 

in app.js set few routes

class app extends component {   render() {     return (       <switch>         <route path="/auth" component={auth} />         <route exact path="/" component={home} />       </switch>     );   } }  export default withrouter(app); 

then in auth component

function auth(props) {   return (     <div>       <route exact path={`${props.match.path}/login`} component={login} />     </div>   ); } export default withrouter(auth); 

and login component

export class login extends component {   login({email, password}) {     this.props.login({ email, password });   }    render() {     return (       <form         onsubmit={(credentials) => this.login(credentials)} />     );   } }  login.proptypes = {   login: proptypes.func }  const mapdispatchtoprops = (dispatch) => {   return {     login: (credentials) => dispatch(loginrequest(credentials))   }; }  export default connect(null, mapdispatchtoprops)(login); 

triggering this.props.login({ email, password }); should dispatch loginrequest(credentials) actions.

however this.props.login not function error. no props set in login component..connect() seems have not effect @ all.

the parents have access props injected connect(), 2nd level route, can't props it's supposed receive..

i hope it's clear enough.. missing ? idea go wrong ?

thanks !

remove export while defining logic class export class login extends component { , make sure importing logic default component import login '/path/to/login

class login extends component {   login({email, password}) {     this.props.login({ email, password });   }    render() {     return (       <form         onsubmit={(credentials) => this.login(credentials)} />     );   } }  login.proptypes = {   login: proptypes.func }  const mapdispatchtoprops = (dispatch) => {   return {     login: (credentials) => dispatch(loginrequest(credentials))   }; }  export default connect(null, mapdispatchtoprops)(login);