將用戶道具傳遞給所有的孩子反應路由器

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