Next.js 实现 SPA 单页面应用

方法

Link 组件

使用next/link下的<Link>组件，指定href。

<Link href="/about">关于</Link>

useRouter()

使用next/navigation下的useRouter钩子，push方法。

'use client'

import {useRouter} from 'next/navigation';

export default function MenuButton() {
    const router = useRouter();
    
    const handleClick = () => {
        router.push("/about");
    }
    
    return <Button onClick={handleClick}>点击</Button>
}