title: NextJs: Next Link router query returns undefined after submitting form on page
body: <p>I am using nextjs, I have a page where it lists out all clients, I can then click each client name that links (using next/link) to a page specifically for that client. It loads correctly using useEffect and useState. If I refresh manually all data loads correctly. Yet If I open the &quot;add invoice&quot; form and submit, the submission goes through correctly to the database, yet on refresh (from clicking submit) the page loads none of the original information on the initial fetch. The page, <em>clients.js</em>, has a  component that
  has a query part that sends the client <strong>id</strong> and <strong>name</strong> to the <em>[id].js</em> page, eventually sent to the server via the <strong>fetchInvoices</strong> function. <em>[id].js</em> calls <em>clientTitle.jsx</em> for the add invoice button that holds the form and submit button. I have been working on this site so much to prove to myself that I can actually code and create instead of just copying youtube tutorials so it would be great if I could get help thanks.</p>
  <p><strong>NOTE</strong>
  see &lt;==== in code for important info</p>
  <p><strong>My debugging effort:</strong>
  After doing some debugging, the router.query in [id].js retains the information for the id but not for the name upon submitting, this is important as for the fetch to function correctly the individual invoices for the client to be fetched the name is needed. So why does the id stay stored but not the name from the query, is it because only the id part is in the URL link, since [id].js in react renames that to the actual Id? Thats my thinking but unsure. I am sure this is the problem.</p>
  <p><strong>Code layout:</strong>
  This is the main client page with all clients layout | FILENAME: <strong>clients.js</strong></p>
  <pre><code>const clients = ({ clients }) =&gt; {
    return (
      &lt;div&gt;
        &lt;Title title=&quot;Clients&quot; /&gt;
        &lt;div&gt;
          {clients.map((client) =&gt; (
  
         //Maps out all the clients in the database//
            &lt;div key={client._id}&gt;
              {/* &lt;Link href=&quot;/clientInfo&quot;&gt; */}
              &lt;Link
                href={{
                  pathname: &quot;/clients/[id]&quot;,
                  query: {
                    id: client._id,    &lt;=============================
                    name: client.name, &lt;=======
                  },
                }}
              &gt;
                &lt;div &gt;
                  &lt;a&gt;{client.name}&lt;/a&gt;
                &lt;/div&gt;
              &lt;/Link&gt;
  
              &lt;span&gt;{client.balance}&lt;/span&gt;
              &lt;span&gt;{client.trips}&lt;/span&gt;
            &lt;/div&gt;
          ))}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>After clicking a client name it opens this page | FILENAME: <strong>[id].js</strong> //used like this so id shows up as part of URL</p>
  <pre><code>import ClientTitle from &quot;./ClientTitle&quot;;
  
  const ClientInfo = () =&gt; {
    const router = useRouter();
    const { id, name } = router.query; //gets slug info from url &lt;=======================
  
    const [clientData, setClientData] = useState({});
    const [clientInvoices, setClientInvoices] = useState(null);
  
    //fetches data sets to state
    const fetchData = async () =&gt; {
      const data = await axios.get(`http://localhost:5010/clients/${id}`);
      setClientData(data.data);
  
      return data;
    };
  
    const fetchInvoices = async () =&gt; {.  &lt;======================
      //get client specific invoices
      const invoices = await axios.get(
        `http://localhost:5010/clients/${id}/fetch?client=${name}` &lt;=====taken from top
      );
      console.log(id);
      console.log(name);
      console.log(invoices);
      console.log(&quot;fetching&quot;);
      setClientInvoices(invoices.data);
    };
  
    //runs at start of page and refresh dependent on router readiness
    useEffect(() =&gt; {
      if (router.isReady) {
        fetchData();
        fetchInvoices();
      }
    }, [router.isReady]);
  
    return (
      &lt;div&gt;
        &lt;ClientTitle       &lt;==============
          title={clientData.name}
          balance={clientData.balance}
          clientId={clientData.clientId}
        /&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;span&gt;Date&lt;/span&gt;
            &lt;span&gt;From&lt;/span&gt;
            &lt;span&gt;To&lt;/span&gt;
            &lt;span&gt;Price&lt;/span&gt;
          &lt;/div&gt;
          {clientInvoices &amp;&amp;
            clientInvoices.map((invoice) =&gt; (
              &lt;div key={invoice._id}&gt;
                &lt;div&gt;{invoice.date}&lt;/div&gt;
                &lt;div&gt;{invoice.from}&lt;/div&gt;
                &lt;div&gt;{invoice.to}&lt;/div&gt;
                &lt;div&gt;{invoice.price}&lt;/div&gt;
              &lt;/div&gt;
            ))}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default ClientInfo;
  </code></pre>
  <p>In the above code it calls this code below in another file, for the top nav bar with the submission form | FILENAME: <strong>ClientTitle.jsx</strong></p>
  <pre><code>const Form = ({ name }) =&gt; {
    const [clientInvoice, setClientInvoice] = useState({
      client: name,
      date: &quot;&quot;,
      from: &quot;&quot;,
      to: &quot;&quot;,
      quantity: null,
      loadType: &quot;&quot;,
      price: null,
      note: &quot;&quot;,
    });
  
    const handleSubmit = async (e) =&gt; {
      await axios.post(&quot;http://localhost:5010/clients/invoices&quot;, clientInvoice);
    };
  
    return (
      &lt;div className=&quot;relative&quot;&gt;
        &lt;div&gt;
          &lt;span&gt;New Invoice&lt;/span&gt;
          &lt;form onSubmit={handleSubmit}&gt;
            &lt;input
              placeholder=&quot;date&quot;
              onChange={(e) =&gt;
                setClientInvoice({ ...clientInvoice, data: e.target.value })
              }
            /&gt;
            &lt;input
              placeholder=&quot;from&quot;
              onChange={(e) =&gt;
                setClientInvoice({ ...clientInvoice, from: e.target.value })
              }
            /&gt;
            &lt;input
              placeholder=&quot;to&quot;
              onChange={(e) =&gt;
                setClientInvoice({ ...clientInvoice, to: e.target.value })
              }
            /&gt;
            &lt;input
              placeholder=&quot;quantity&quot;
              onChange={(e) =&gt;
                setClientInvoice({ ...clientInvoice, quantity: e.target.value })
              }
            /&gt;
            &lt;input
              placeholder=&quot;boxes/pallets&quot;
              onChange={(e) =&gt;
                setClientInvoice({ ...clientInvoice, loadType: e.target.value })
              }
            /&gt;
            &lt;input
              placeholder=&quot;price&quot;
              onChange={(e) =&gt;
                setClientInvoice({ ...clientInvoice, price: e.target.value })
              }
            /&gt;
            &lt;input
              placeholder=&quot;note&quot;
              onChange={(e) =&gt;
                setClientInvoice({ ...clientInvoice, note: e.target.value })
              }
            /&gt;
            &lt;button
              type=&quot;submit&quot;
            &gt;
              Create
            &lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  const ClientTitle = ({ title, balance }) =&gt; {
    const [showForm, setShowForm] = useState(false);
  
    const handleForm = () =&gt; {
      setShowForm(!showForm);
    };
  
    return (
      &lt;div &gt;
        &lt;div &gt;
          &lt;h1 &gt;{title}&lt;/h1&gt;
          &lt;span &quot;&gt;Total Balance: {balance}&lt;/span&gt;
          &lt;button
            onClick={() =&gt; handleForm()}
          &gt;
            &lt;span &gt;Add Invoice&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div /&gt;
        {showForm &amp;&amp; &lt;Form name={title} /&gt;}
      &lt;/div&gt;
    );
  };
  
  export default ClientTitle;
  </code></pre>