将用户道具传递给所有的孩子反应路由器

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> 

我想通过道具来传递一个用户无论是谁，功能或尝试从验证的组件，这将拉动从本地存储。

我试图做的愚蠢的事情是操纵this.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 clone元素就是你想要的。

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

如果升级到4，您可以使用比赛用自己的HOC进行身份验证版本。

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