ルートから上位コンポーネントを経由して小道具を渡す

Question

上位コンポーネントに問題があります。 <Layout />コンポーネントからルートを経由して小道具を渡そうとしています（React Router v4）。ルートで指定されたコンポーネントはHOCによってラップされますが、パスした小道具はコンポーネントに到達しません。

また、export default() => MyHOC(MyComponent)を使用せずにHOCを使用することはできません。なぜ私は理解できませんが、それはそれと関係がありますか？

Layout.js

const Layout = ({ location, initialData, routeData, authenticateUser }) => (
    <Wrapper> 
    <Container> 
     <Switch> 
      // how do I get these props passed through the HOC? render instead of component made no difference. 
      <Route exact path="/pages/page-one" component={() => <PageOne routeData={routeData} title="PageOne" />} /> 
      <Route exact path="/pages/page-two" component={() => <PageTwo routeData={routeData} title="PageTwo" />} /> 
      <Route component={NotFound} /> 
     </Switch> 
    </Container> 
    </Wrapper> 
) 

export default Layout 

Page.js

// I've tried swapping to (WrappedComponent) => (props) without success 
const Page = (props) => (WrappedComponent) => { 
const renderHeader = props.header 
    ? <Header title={props.headerTitle} /> 
    : false 
return (
    <Wrapper> 
    {renderHeader} 
    <Container withHeader={props.header}> 
     <WrappedComponent /> 
    </Container> 
    </Wrapper> 
) 
} 

export default Page 

PageOne.js

class PageOne extends React.Component { 
    render() { 
    return (
     <Content> 
     <Title>{this.props.title}</Title> // <----- not working! 
     {JSON.stringify(this.props.routeData, null, 4)} // <---- not working! 
     </Content> 
    ) 
    } 
} 

export default() => Page({ header: true, headerTitle: 'header title' })(PageOne) 

// does not work without() => Page 
// when using just export default Page I get the "Invariant Violation: Element type is invalid: 
// expected a string (for built-in components) or a class/function (for composite components) 
// but got: object. Check the render method of Route." error. 

Answer 1

あなたはもう一つの矢印が必要PageをHOCにするparams、ラップされたコンポーネント、およびコンポーネントを返さなければなりません。あなたは今、あなたはこの

export default Page({ header: true, headerTitle: 'header title' })(PageOne)