すべての子ノードにユーザーの小道具を渡す

Question

子供の小道具を渡すラッパーコンポーネントを作成したいと思います。たとえば、純粋な反応の認証システムです。

<Router history={ hashHistory } > 
<Route path="/" component={Base}> 
<Route component={Auth}> 
    <Route path="/who" component={Who} /> 
    <Route path="/features" component={Features} /> 
    <Route path="/try" component={Try} /> 
</Route> 
</Route> 
</Router> 

私は、誰のいずれかに小道具でユーザーを渡す機能やローカルストレージから引っ張ってくる認証、からコンポーネントを試してみたいです。

私がしようとしたばかげたことは、この.propsまたはthis.props.childrenを操作することですが、これは問題ではありません。推奨される解決策は何ですか？

class Auth extends Component { 
    render() { 
    //find user or null 
    var user = JSON.parse(localStorage.getItem('user')) || []; 
    //this.props.user = user; 
    console.log('top level router props.user', this.props.user); 
    return (
    <div> 
    {this.props.children} 
    </div> 
    ); 
    } 
} 

Answer 1

この回答がJessによって表示されます。反応クローン要素はあなたが望むものです。

React router and this.props.children - how to pass state to this.props.children

render() { 
    var childrenWithProps = React.cloneElement(this.props.children, {someProp: this.state.someProp}); 
    return (
     <div> 
     <Header /> 
     {childrenWithProps} 
     </div> 
    ); 
    } 

Answer 2

あなたは認証のためにあなた自身のHOCとの一致を使用することができ、バージョン4にアップグレードする場合。

https://react-router.now.sh/auth-workflow