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

Posted 2023-02-22

【中文标题】TypeError：无法读取 null 的属性（读取“推送”）react.js

【英文标题】：TypeError: Cannot read properties of null (reading 'push') 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

【参考方案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') 正常工作。