title: How to pass props in routes?
body: <p>I have the selected country in Country.js. What I want to do is pass this country to Home.js and also render Home.js when the user clicks the button.</p>
  <p>App.js</p>
  <pre><code>const App = () =&gt; {
    return (
      &lt;BrowserRouter&gt;
        &lt;Switch&gt;
          &lt;Route exact path=&quot;/&quot; component={Country} /&gt;
          &lt;Route path=&quot;/home&quot; component={Home} /&gt;
        &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
    );
  };
  </code></pre>
  <p>Country.js</p>
  <pre><code>return (
      &lt;div className=&quot;container&quot;&gt;
        &lt;label htmlFor=&quot;country&quot;&gt;Country&lt;/label&gt;
        &lt;select name=&quot;country&quot; id=&quot;country&quot; onChange={handleSelect}&gt;
          &lt;option value=&quot;-1&quot;&gt;--Country--&lt;/option&gt;
          &lt;option value=&quot;in&quot;&gt;India&lt;/option&gt;
          &lt;option value=&quot;jp&quot;&gt;Japan&lt;/option&gt;
          &lt;option value=&quot;us&quot;&gt;USA&lt;/option&gt;
          &lt;option value=&quot;br&quot;&gt;Brazil&lt;/option&gt;
          &lt;option value=&quot;ch&quot;&gt;China&lt;/option&gt;
          &lt;option value=&quot;sr&quot;&gt;Sri lanka&lt;/option&gt;
        &lt;/select&gt;
        &lt;Link to=&quot;/home&quot;&gt;
          &lt;button type=&quot;submit&quot;&gt;Proceed&lt;/button&gt;
        &lt;/Link&gt;
      &lt;/div&gt;
    );
  </code></pre>