title: Next.js router not fetching query from url on refresh
body: <p>So I have a React component called <code>[apiID].tsx</code> that looks like:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import { withRouter, NextRouter } from &quot;next/router&quot;;
  
  interface WithRouterProps {
      router: NextRouter;
  }
  
  interface MyComponentProps extends WithRouterProps {}
  class DataPage extends React.Component&lt;MyComponentProps, any&gt; {
      constructor(props) {
          super(props);
  
          this.state = {
              apiData: {},
          }
      }
  
      async componentDidMount() {
          await this.fetchApi();
      }
  
      async fetchApi() {
          const apiUrl = `https://example.org/api/${this.props.router.query.apiID}?api_key=${process.env.API_KEY}`;
          const res = await fetch(apiUrl);
          const data = await res.json();
          this.setState({ apiData: data });
      }
  }
  
  export default withRouter(DataPage);
  </code></pre>
  <p>The page works fine when I click on a link that brings me to this page, but the problem occurs when refreshing the page. When I click on a link from another page that takes me here, the router successfully finds the query in the url and puts it into the <code>apiUrl</code> string. When refreshed, it returns undefined:</p>
  <pre><code>https://example.org/api/undefined?api_key=*******
  </code></pre>
  <p>I am new to both React and Next.js so I am not familiar with all of the ways that the router works. I tried putting the url in the state but that did not work either.</p>