TypeError：无法读取 null 的属性（读取“推送”）react.js

Question

我想将内部页面链接到<IconButton> ，但是当我尝试使用<Link>或使用onClick={() => router.push(Page)}时，它返回相同的错误： TypeError: Cannot read properties of null (reading 'push') 。 我可以解决这个问题吗？ 这是代码：

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

它应该在 onClick 监听器上使用 URL ，看来你提供了一个组件

像这样：

router.push('/about')

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