title: How can I pass props to 'this.props.children' when using react-router?
body: <p>I have a state 'isLoggedIn' in App Component.</p>
  
  <p>Now, I want to pass this state as props to the child component 'Secret Component'.</p>
  
  <pre><code>&lt;BrowserRouter&gt;
      &lt;App&gt;
          &lt;Switch&gt;
              &lt;Route path='/secret' component={Secret} /&gt;
              &lt;Route path='/' component={Top} /&gt;
          &lt;/Switch&gt;
      &lt;/App&gt;
  
  &lt;/BrowserRouter&gt;
  </code></pre>
  
  <p>But, I'm using react-router(ver4.1) like this and can't figure out how to pass the state of App Component as props to its child component.</p>
  
  <pre><code> const childrenWithProps = React.Children.map(this.props.children, (child) =&gt; {
              console.log(child);
              }
          );
  </code></pre>
  
  <p>I know, by doing like this, I can get an access to this.props.children and set additional props to them but since I wrap my components with Router Component, the children of App Component are now Route components, which makes it complicated...</p>
  
  <p>Could anyone please tell me how to do it?</p>
  
  <p>I'm also worried if I'm doing wrong on how to use react-router.</p>
  
  <p>thanks!</p>
  
  <h1>index.js(entry point)</h1>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import { BrowserRouter, Route, Switch } from 'react-router-dom';
  
  import App from './components/App';
  import Secret from './components/Secret';
  import Top from './components/Top';
  
  ReactDOM.render(
      &lt;BrowserRouter&gt;
          &lt;App&gt;
              &lt;Switch&gt;
                  &lt;Route path='/secret' component={Secret} /&gt;
                  &lt;Route path='/' component={Top} /&gt;
              &lt;/Switch&gt;
          &lt;/App&gt;
  
      &lt;/BrowserRouter&gt;
      ,
      document.querySelector('.container')
  );
  </code></pre>
  
  <h1>App.js</h1>
  
  <pre><code>import React, { Component } from 'react';
  
  import NavigationMenu from './NavigationMenu';
  
  export default class App extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              isLoggedIn: false
          };
          this.toggleAuthenticationStatus = this.toggleAuthenticationStatus.bind(this);
      }
  
  
      toggleAuthenticationStatus() {
          this.setState({
              isLoggedIn: !this.state.isLoggedIn
          });
      }
  
  
      render() {
  
          //I want to pass this.state.isLoggedIn as props to Secret Component!!!
  
          const childrenWithProps = React.Children.map(this.props.children, (child) =&gt; {
              console.log(child);
              }
          );
  
          return (
              &lt;div&gt;
                  &lt;NavigationMenu isLoggedIn={this.state.isLoggedIn} toggleAuthenticationStatus={this.toggleAuthenticationStatus} /&gt;
                  {this.props.children}
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <h1>Secret.js</h1>
  
  <pre><code>import React, { Component } from 'react';
  
  class Secret extends Component {
  
      constructor(props) {
          super(props);
      }
  
  
      componentWillMount() {
          if (this.props.isLoggedIn === false) {
              this.props.history.push('/');
          }
      }
  
      componentWillUpdate() {
          if (this.props.isLoggedIn === false) {
              this.props.history.push('/');
          }
      }
  
      render() {
          return (
              &lt;div&gt;
                  This content is only for our members!
              &lt;/div&gt;
          )
      }
  }
  
  export default Secret;
  </code></pre>