如何使用 react-router 通过 Route 渲染传递 redux 商店道具?
Posted
技术标签:
【中文标题】如何使用 react-router 通过 Route 渲染传递 redux 商店道具?【英文标题】:How to pass redux store props via Route render using react-router? 【发布时间】:2018-05-13 03:28:12 【问题描述】:我是一个 redux 初学者,一直在通过 redux props 来路由渲染问题。
×
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
;
如何使用 react-router-dom 通过 Route 渲染从 redux 商店传递 nonFrameDisplay、FrameDisplay 道具?提前致谢!
【问题讨论】:
你的reducers
在哪里
【参考方案1】:
当你写作时
const PageLayoutRoute = (component: Component, ...rest ) =>
return (
<Route
...rest
render=props =>
<PageLayout ...props>
<Component />
</PageLayout>
/>
)
;
将PageLayoutRoute
连接到Store后收到的props通过
<Route
...rest
但是这些并没有传递到 Route 渲染的组件上,
你需要做类似的事情
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));
【讨论】:
以上是关于如何使用 react-router 通过 Route 渲染传递 redux 商店道具?的主要内容,如果未能解决你的问题,请参考以下文章
React-router v4 this.props.history.push(...) 不工作
在 react-router v4 中对不同的路由路径使用相同的组件