score:3

Accepted answer

The best way I know how is to use the React.Children utility. Here's a quick Codepen to see the concept in action. http://codepen.io/anon/pen/RrKbjZ

So the code in the render() function of the App component in your example would look something like this.

render: function() {

  var regButton = (this.state.loggedIn) ? null : (<Link className="Navigation__link" to="register">Register</Link>);
  var accountButton = (this.state.loggedIn) ? (<Link className="Navigation__link" to="account">My Account</Link>) : null;
  var childrenWithProps = React.Children.map(this.props.children, (Child, i) => {
    return React.cloneElement(Child, {
      loggedIn: this.state.loggedIn
    });
  });

  return (
    <div>
      <nav className="Navigation">
        {
          this.state.loggedIn ? 
          (<Link className="Navigation__link" to="/logout">Log out</Link>) :
          (<Link className="Navigation__link" to="/login">Sign in</Link>)  
        }
        {regButton}
        {accountButton}
        <Link className="Navigation__link" to="dashboard">Dashboard</Link>
      </nav>
      <div>
        {childrenWithProps}
      </div>
    </div>
  );
}

score:0

I have the same problem before. This issue may help you.

https://github.com/rackt/react-router/issues/1857

However, this method for passing parameter is not recommend, especially when you are building a big app.

I recommend some state manager for js, such as "Redux".


Related Query

More Query from same tag