title: How to change url without refreshing to the next page using Next Js useRouter?
body: <p>I am using Next.js and I want to know how to change the url on the same page without refresh it. I am using shallow=true but it still render to the next page.</p>
  <p>This is my code:</p>
  <pre><code>&lt;Tabs&gt;
     &lt;Tab href='test/1' label='Sample Exam'/&gt;
     &lt;Tab href='test/1/exam' label='Test Exam'/&gt;
  &lt;/Tabs&gt;
  &lt;TabPanel value={tabvalue} index={0}&gt;
     &lt;SampleComponent /&gt;
  &lt;/TabPanel&gt; 
  &lt;TabPanel value={tabvalue} index={1}&gt;
     &lt;TestComponent /&gt;
  &lt;/TabPanel&gt; 
  </code></pre>
  <p>This is the logic but does not work</p>
  <pre><code>    const [tabValue, setTabValue] = React.useState(0);
      const router = useRouter();
      const handleChange = (event: React.ChangeEvent&lt;{}&gt;, newValue: number) =&gt; {
          setTabValue(newValue);
          useEffect(() =&gt; {
              router.replace('/test/1', '/test/1/exam', { shallow: true});
          }, []);
      };
  </code></pre>
  <p>I have already test router.push it does not work and windows replace state is a bad idea. The tabs will look like this.</p>
  <pre><code>     Sample Exam          |        Test Exam
  </code></pre>
  <p>if you click sample exam it will show the Sample Details same with the Test but it must be on the same page.</p>
  <p>Thanks.</p>