title: react router 4 query parameters example not working
body: <p><strong>problem</strong>: trying to implement react router query parameters example on my local environment. code below from their website.</p>
  
  <pre><code>import React from "react";
  import { BrowserRouter as Router, Link } from "react-router-dom";
  
  function ParamsExample({ location }) {
    let params = new URLSearchParams(location.search);
  
    return (
      &lt;Router&gt;
        &lt;div&gt;
          &lt;p&gt;
            React Router does not have any opinions about how your parse URL query
            strings. Some applications use simple key=value query strings, but
            others embed arrays and objects in the query string. So it's up to you
            to parse the search string yourself.
        &lt;/p&gt;
          &lt;p&gt;
            In modern browsers that support{" "}
            &lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/URL"&gt;
              the URL API
          &lt;/a&gt;
            , you can instantiate a &lt;code&gt;URLSearchParams&lt;/code&gt; object from{" "}
            &lt;code&gt;location.search&lt;/code&gt; and use that.
        &lt;/p&gt;
          &lt;p&gt;
            In{" "}
            &lt;a href="https://caniuse.com/#feat=url"&gt;
              browsers that do not support the URL API (read: IE)
          &lt;/a&gt;{" "}
            you can use a 3rd party library such as{" "}
            &lt;a href="https://github.com/sindresorhus/query-string"&gt;query-string&lt;/a&gt;.
        &lt;/p&gt;
          &lt;div&gt;
            &lt;h2&gt;Accounts&lt;/h2&gt;
            &lt;ul&gt;
              &lt;li&gt;
                &lt;Link to={{ pathname: "/account", search: "?name=netflix" }}&gt;
                  Netflix
              &lt;/Link&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;Link to={{ pathname: "/account", search: "?name=zillow-group" }}&gt;
                  Zillow Group
              &lt;/Link&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;Link to={{ pathname: "/account", search: "?name=yahoo" }}&gt;
                  Yahoo
              &lt;/Link&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;Link to={{ pathname: "/account", search: "?name=modus-create" }}&gt;
                  Modus Create
              &lt;/Link&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
  
            &lt;Child name={params.get("name")} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  
  function Child({ name }) {
    return (
      &lt;div&gt;
        {name ? (
          &lt;h3&gt;
            The &lt;code&gt;name&lt;/code&gt; in the query string is "{name}"
          &lt;/h3&gt;
        ) : (
            &lt;h3&gt;There is no name in the query string&lt;/h3&gt;
          )}
      &lt;/div&gt;
    );
  }
  
  export default ParamsExample;
  </code></pre>
  
  <p>when rendering i get the following error message <br> <code>TypeError: Cannot read property 'search' of undefined</code> <br> which is pretty straight forward, but when i do <code>location.search</code> in my <code>console</code> i get the following output <code>"?name=zillow-group"</code><br> with that being said <code>location.search</code> is a valid property but not sure why react is not seeing it.</p>