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

【问题标题】：TypeError: Cannot read properties of null (reading 'push') react.jsTypeError：无法读取 null 的属性（读取“推送”）react.js
【发布时间】：2022-01-16 13:14:46
【问题描述】：

我想将内部页面链接到<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

【问题讨论】：

标签： reactjs hyperlink next.js jsx chakra-ui

【解决方案1】：

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

像这样：

router.push('/about')

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

【讨论】：

我已经尝试过这样，它仍然给我这个错误:(
@SaverioScagnoli 项目是否有/about url？
是的，我尝试将它移动到每个可能的文件夹中，但它仍然给了我错误
@SaverioScagnoli about 页面应位于 /pages/about.js 下，以便 router.push('/about') 正常工作。