title: Next.js router.query getting undefined on refreshing page, but works if you navigate to it from Link component
body: <p>Why is router.query empty when I refresh a page with the correct id in the URL, but when when I navigate towards it through , it works?</p>
  <p>say I have <strong>/pages/[user]/index.js</strong></p>
  <pre><code>&lt;Link
    href=&quot;/[user]/media/[mediaId]&quot;
    as={`/${username}/media/${post.id}`}
  &gt;
  </code></pre>
  <p>this link takes me to <code>localhost:3000/testuser/media/some-id</code></p>
  <p>then in <strong>/pages/[user]/media/[mediaId].js</strong></p>
  <pre><code>const MediaPage = () =&gt; {
    const [post, setPost] = useState([]);
    const router = useRouter();
    const { mediaId } = router.query;
  
  
    useEffect(() =&gt; {
      router.prefetch(&quot;/&quot;);
    }, []);
  
    useEffect(() =&gt; {
      if (!mediaId) return null;
      getPostImage();
  
      async function getPostImage() {
        try {
          const { data } = await API.graphql({
            query: postById,
            variables: {
              id: mediaId,
            },
          });
          setPost(data.postById.items[0]);
        } catch (err) {
          console.log(&quot;error getPostImage&quot;, err);
        }
      }
    }, [mediaId]);
  
    if (user === null) return null;
  
    return (
      &lt;div&gt;
        &lt;Modal
          className={`${styles.postModal}`}
          isOpen={true}
          onRequestClose={() =&gt; router.push(`/${user.username}`)}
          contentLabel=&quot;Post modal&quot;
        &gt;
          {* // content ... *}
        &lt;/Modal&gt;
      &lt;/div&gt;
    );
  };
  
  export default MediaPage;
  </code></pre>
  <p>When I'm on the media page or <code>localhost:3000/testuser/media/some-id</code>, and press refresh, the <code>mediaId</code> from router.query is empty.</p>