Here are some example code for useRouter hook. Hooks, in React.js, can only be used inside of functional components.First, import the useRouter hook:<pre><code class="language-javascript">import { useRouter } from "next/router";</code></pre>Then use it inside the component:<pre><code class="language-javascript">export default function MyFunction(props) {
 const router = useRouter();
}</code></pre>if the url is something like <a target="_blank" rel="noopener noreferrer nofollow" href="https://baalish.com/:userName">https://baalish.com/:userName</a> then you can retrieve the userName query like this:<pre><code class="language-javascript">router.query.userName</code></pre>You might need to verify when the router has fully loaded. Since, you cannot get the query right away after the router is invoked.So, in such cases we use router.isReady:<pre><code class="language-javascript">useEffect(() =&gt; {
 if (!router.isReady) return;
 
 // Here you can get router.query.userName
 
 }, [router.isReady]);</code></pre>Lastly, to go to another url you can use the push method:<pre><code class="language-javascript">router.push("/")</code></pre>

Here are some example code for useRouter hook. Hooks, in React.js, can only be used inside of functional components.

First, impor...

Aneek Rahman

Cheatsheet: useRouter hook for Next.js