react-router를 사용하여 Route render를 통해 redux store props를 전달하는 방법은 무엇입니까?

Question

나는 초보자이고 redux 소품을 라우트 문제를 전달하는 데 집착했다.

× 
TypeError: Cannot read property 'quantity' of undefined 
PageLayout._this.render 
src/components/controls/PageLayoutRoute/PageLayoutRoute.js:135 
    132 |  to: routes.checkout, 
    133 |  withArrow: true, 
    134 |  bold: true, 
> 135 |  disabled: (this.props.nonFrameDisplay.quantity == 0 && this.props.frameDisplay.quantity == 0) ? true : false 
    136 | }; 
    137 | } 
    138 | 

PageLayoutRoute는 다음과 같습니다.

const PageLayoutRoute = ({component: Component, ...rest }) => { 
    return (
    <Route 
    {...rest} 
    render={props => 
     <PageLayout {...props}> 
     <Component /> 
     </PageLayout>} 
    /> 
) 
}; 

PageLayoutRoute.propTypes = { 
    component: PropTypes.func.isRequired, 
}; 
const mapStateToProps = state => ({ 
    nonFrameDisplay: state.app.nonFrameDisplay, 
    frameDisplay: state.app.frameDisplay, 
}); 
const mapDispatchToProps = { 
}; 
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PageLayoutRoute)); 

PageLayout 구성 요소가 PageLayoutRout에 포함되어 있습니다. 이렇게 생겼어.

class PageLayout extends React.Component { 
    static propTypes = { 
    children: PropTypes.node.isRequired, 
    hideTopNav: PropTypes.bool, 
    hideBottomNav: PropTypes.bool, 
    ...bottomNavProps 
    }; 

    static defaultProps = { 
    hideTopNav: false, 
    hideBottomNav: false 
    }; 

어떻게 반응 라우터-DOM을 사용하여 렌더링 경로를 통해 REDUX 상점에서 nonFrameDisplay, FrameDisplay 소품을 통과 할 수 있습니까? 미리 감사드립니다!

Answer 1

당신이 쓸 때

const PageLayoutRoute = ({component: Component, ...rest }) => { 
    return (
    <Route 
    {...rest} 
    render={props => 
     <PageLayout {...props}> 
     <Component /> 
     </PageLayout>} 
    /> 
) 
}; 

소품 그러나 이러한 경로,

에 의해 렌더링 구성 요소에 전달되지 않습니다

<Route 
    {...rest} 

하여 경로의 구성 요소에 전달되어 저장하는 PageLayoutRoute를 연결 한 후 접수

다음과 같이해야합니다.

const PageLayoutRoute = ({component: Component, nonFrameDisplay, frameDisplay, ...rest }) => { 
    return (
    <Route 
    {...rest} 
    render={props => 
     <PageLayout 
      {...props} 
      nonFrameDisplay={nonFrameDisplay} 
      frameDisplay={frameDisplay} 
     > 
     <Component /> 
     </PageLayout>} 
    /> 
) 
}; 

PageLayoutRoute.propTypes = { 
    component: PropTypes.func.isRequired, 
}; 
const mapStateToProps = state => ({ 
    nonFrameDisplay: state.app.nonFrameDisplay, 
    frameDisplay: state.app.frameDisplay, 
}); 
const mapDispatchToProps = { 
}; 
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PageLayoutRoute));