如何使用 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组件
<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中的ECMA6传播参数

React-router v4 this.props.history.push(...) 不工作

react-router 4.x 路由按需加载

在 react-router v4 中对不同的路由路径使用相同的组件

制作一个高阶组件以与 TypeScript 互操作 react-relay 和 react-router

react-router v2.0 的打字稿定义-错误`没有导出的成员'browserHistory'`