reactjs - React-router and redux manual URL enter error -
i have problem of undefined props redux store. here routehandler
file
function organisationsfromstore(store) { const { router, organisations } = store; return { organisations } } function organisationfromstore(store) { const { router, organisations } = store; const { organisationid } = router.params; return { organisation: organisations.get(parseint(organisationid)) } } export const organisationroutehandler = connect(organisationfromstore)(organisation); export const accountsconfigurationroutehandler = connect(organisationsfromstore)(accountsconfiguration);
this hooked getroutes.jsx
file handles routes:
<route path="accounts" component={accountsconfigurationroutehandler}> <route path=":organisationid" component={organisationroutehandler}></route> </route>
in organisation.jsx
(which gets organisations
prop it's parent accountsconfiguration
) component have:
render() { return ( <div style={{display: "inline"}}> <div classname={styles.desks}> <span classname={deskstyles.deskslabel}>desks</span> <ul classname={deskstyles.deskslist}> { this.props.organisation.get("desks").map(desk => { return <li>{desk.get("name")}</li>; }) } </ul> </div> <div classname={this.state.childrenstyle}> {this.props.children} </div> </div> );
when thy enter url manually e.g localhost:1234/accounts/4
(4 being organisationid
), error saying this.props.organisations not defined
, breaks app. happening because first route's handler (organisationsfromstore
) did not store organisations
, didn't pass prop accountsconfiguration
, didn't pass organisations
via this.props.children
.
what best way make component wait previous routes props, , render in case organisation
component without error? or there better way of doing this. hope clear, thanks.
p.s i'm using old redux-router version before v2, , must version @ time.
ok, mind wasn't working yesterday, inserted check if props defined , rendered conditionaly this.props.organisation ? .... : null
Comments
Post a Comment