TypeError: Cannot read properties of null (reading 'push') react.js

Question

I want to link an internal page to an <IconButton>, but when I try to do it either with <Link> or with onClick={() => router.push(Page)} it returns the same error: TypeError: Cannot read properties of null (reading 'push'). How can I solve this problem? Here's the 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 (
        <VStack>

             <IconButton onClick={() => router.push(About)} icon={<BsFillPersonFill />} rounded="full" right="830" top="-300"></IconButton>
             <IconButton icon={<BsWrench />} rounded="full" right="830" top="-300" ></IconButton>
             <IconButton icon={<BsBriefcaseFill />} rounded="full" right="830" top="-300" ></IconButton>
             <IconButton icon={<BsEnvelopeFill />} rounded="full" right="830" top="-300" ></IconButton>

        </VStack>
    )
}

export default Navbar

Answer 1

It should take an URL on the onClick listener, It seems you provide it a component

like this:

router.push('/about')

https://nextjs.org/docs/api-reference/next/router#routerpush