title: TypeError: Cannot read properties of null (reading 'push') react.js
body: <p>I want to link an internal page to an <code>&lt;IconButton&gt;</code>, but when I try to do it either with <code>&lt;Link&gt;</code> or with <code>onClick={() =&gt; router.push(Page)}</code> it returns the same error: <code>TypeError: Cannot read properties of null (reading 'push')</code>. How can I solve this problem? Here's the code:</p>
  <pre><code>import React from 'react'
  import { useRouter } from 'next/router';
  import { VStack,IconButton } from '@chakra-ui/react';
  import {BsFillPersonFill, BsWrench, BsBriefcaseFill, BsEnvelopeFill} from 'react-icons/bs'                     
  import About from './About';
  
  
  function Navbar() {
      const router = useRouter()
      return (
          &lt;VStack&gt;
  
               &lt;IconButton onClick={() =&gt; router.push(About)} icon={&lt;BsFillPersonFill /&gt;} rounded=&quot;full&quot; right=&quot;830&quot; top=&quot;-300&quot;&gt;&lt;/IconButton&gt;
               &lt;IconButton icon={&lt;BsWrench /&gt;} rounded=&quot;full&quot; right=&quot;830&quot; top=&quot;-300&quot; &gt;&lt;/IconButton&gt;
               &lt;IconButton icon={&lt;BsBriefcaseFill /&gt;} rounded=&quot;full&quot; right=&quot;830&quot; top=&quot;-300&quot; &gt;&lt;/IconButton&gt;
               &lt;IconButton icon={&lt;BsEnvelopeFill /&gt;} rounded=&quot;full&quot; right=&quot;830&quot; top=&quot;-300&quot; &gt;&lt;/IconButton&gt;
  
          &lt;/VStack&gt;
      )
  }
  
  export default Navbar
  </code></pre>