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

Question

I want to write a wrapper component that passes any children props. For example in a pure react auth system.

<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>

I want to pass a user by props to either the Who, Features or Try components from Auth, which will pull from local storage.

The silly thing I have tried to do is to manipulate this.props or this.props.children but this is not ok, what is the recommended solution?

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

see this answer by Jess. React clone element is what you want.

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

If you upgrade to version 4 you can use Match with your own HOC for auth.

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