title: How to pass props in react router
body: <p>I have an App, a Navbar and a Content class, I am trying to pass a prop from navbar to content that will be rendered when I redirect to the content page.</p>
  
  <h2>App.js</h2>
  
  <pre><code>import React, { Component } from 'react';
  import { BrowserRouter as Router, Route } from 'react-router-dom';
  import Navbar from './components/Home/Navbar';
  import Content from './components/Home/Content';
  
  export default class App extends Component {
  
    render() {
        return (
          &lt;Router&gt;
              &lt;div&gt;
                &lt;Navbar /&gt;
                &lt;Route path="/content" component={Content} render={(props) =&gt; &lt;Navbar {...props} test={this.state.test} /&gt;} /&gt;
              &lt;/div&gt;
          &lt;/Router&gt;
      );
    }
  }
  </code></pre>
  
  <h2>Navbar.js</h2>
  
  <pre><code>import React from 'react';
  
  class Navbar extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              test: 'test',
          }
      }
  
      render() {
          return (
  
              &lt;div&gt;
                  This is my navbar
              &lt;/div&gt;
  
          );
      }
  }
  
  export default Navbar;
  </code></pre>
  
  <h2>Content.js</h2>
  
  <pre><code>import React from 'react';
  
  class Content extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              x: 'x',
              test: this.props.test
          }
      }
  
      render() {
          return (
  
              &lt;div&gt;
                  &lt;p&gt;{this.state.x}&lt;/p&gt;
                  &lt;p&gt;{this.state.test}&lt;/p&gt;
              &lt;/div&gt;
  
          );
      }
  }
  
  export default Content;
  </code></pre>
  
  <p>The problem that I am having is that is when I redirect to the content page, the state from the navbar class is not being passed through to it. How do I fix this?</p>