title: How to pass id to React Js path link?
body: <p>I'm trying to create path for  component like this &quot;/products?id=uniqueId&quot; for my React Js Project. Unique id is taken from database and depends on which product was chosen. My code is</p>
  <p><a href="https://codesandbox.io/s/rough-dawn-ufho9?file=/src/Home.js" rel="nofollow noreferrer">CodeSandbox</a></p>
  <p>App.js</p>
  <pre><code>import &quot;./styles.css&quot;;
  import { BrowserRouter as Router, Switch, Route } from &quot;react-router-dom&quot;;
  import Products from &quot;./Products&quot;
  import Home from &quot;./Home&quot;
  
  export default function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
          &lt;Router&gt;
                  &lt;Switch&gt;
                  &lt;Route exact path=&quot;/&quot;&gt;
                          {&quot; &quot;}
                          &lt;Home/&gt;
                      &lt;/Route&gt;
                      &lt;Route exact path=&quot;/products&quot;&gt;
                          {&quot; &quot;}
                          &lt;Products /&gt;
                      &lt;/Route&gt;
                  &lt;/Switch&gt;
              &lt;/Router&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>Home.js</p>
  <pre><code>import &quot;./styles.css&quot;;
  import React, { useState } from &quot;react&quot;;
  import { useHistory } from &quot;react-router-dom&quot;;
  
  const products = [
    {
      id: &quot;1&quot;,
      name: &quot;Product 1&quot;
    },
    {
      id: &quot;2&quot;,
      name: &quot;Product 2&quot;
    },
    {
      id: &quot;3&quot;,
      name: &quot;Product 3&quot;
    }
  ];
  
  export default function Home() {
    const [id, setId] = useState();
    const history = useHistory();
  
    const handleProceed = (e) =&gt; {
      // console.log(id, &quot;home&quot;);
      history.push(&quot;/products&quot;, { id });
    };
  
    return (
      &lt;div
        style={{ display: &quot;flex&quot;, flexDirection: &quot;column&quot;, alignItems: &quot;center&quot; }}
      &gt;
        &lt;div&gt;
          {products.map((product) =&gt; {
            return (
              &lt;button
                onClick={(e) =&gt; {
                  setId(product.id);
                }}
              &gt;
                {product.name}{&quot; &quot;}
              &lt;/button&gt;
            );
          })}
        &lt;/div&gt;
        &lt;button onClick={handleProceed} style={{ width: &quot;250px&quot; }}&gt;
          {&quot; &quot;}
          Proceed
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  
  </code></pre>
  <p>Product.js</p>
  <pre><code>import &quot;./styles.css&quot;;
  import { useLocation } from &quot;react-router-dom&quot;;
  
  export default function Home() {
    const location = useLocation();
    const { id } = location.state || { id: &quot;none&quot; };
  
    console.log(id);
    return (
      &lt;div&gt;
        &lt;p&gt; Lorem Ipsum&lt;/p&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>Idea is when user presses any button with product name in  &lt; Home /&gt; component, page should be redirected to &lt; Product /&gt; component and path should be &quot;/products?id=uniqueId&quot; where uniqueId = to product.id. I was able to pass product.id from &lt; Home /&gt; to &lt; Product /&gt; using useHistory() and useLocation(), but I don't know how to make path display selected id. For example if user clicks Product 1 button, path to &lt; Product /&gt; should be &quot;/products?id=1&quot;, if Product 2 was chosen path should reflect that as &quot;/products?id=2&quot;  and so on.</p>
  <p>Any help and suggestions are greatly appreciated.</p>