当我启用nextjs 13的appDir功能，并添加一个链接，我得到和错误的";未处理的运行时错误TypeError:无法读取未定义的属性(正在读取'call') "在控制台中，我还看到另一个错误";未捕获错误:补水时出现错误。因为错误发生在悬念边界之外，所以整个根将切换到客户端呈现。";这是我的代码
import Link from 'next/link';
function Header() {
return (
<div>
<Link href="/">Home</Link>
</div>
);
}
export default Header;
inside the appDir i have
layout.tsx
page.tsx
head.tsx
Header.tsx
除了在layout.tsx中添加了Header组件之外，我还没有改变它们中的任何内容
import Header from './Header';
import '../styles/globals.css';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<head />
<body>
<Header />
{children}
</body>
</html>
);
}
仅当我添加'LINK'时如果我不使用appdir，而是使用旧的。/pages，这很好。这是怎么了?因为我看了很多教程，我只是复制和粘贴，我也得到相同的错误时，添加链接
这是我如何使用导航链接顺风。我把这个组件放在app/components/navigation/NavigationLink.tsx
import Link, { LinkProps } from "next/link"
export type NavigationLinkProps = {
label: string
icon?: React.ReactNode
href: string
} & LinkProps
function NavigationLink(props: NavigationLinkProps) {
return (
<Link
{...props}
href={props.href}
className='flex w-full h-11 items-center rounded bg-white px-2 gap-2'
>
{props.icon}
<div className='flex-1'>
{ props.label }
</div>
</Link>
)
}
export default NavigationLink
使用
就可以了href: '/'
我希望这对你有帮助。