路由导航

声明式导航

<Link> 组件用于在应用程序中创建链接。

支持的 Props：

• href：链接的目标地址
• replace：是否替换当前历史记录
• scroll：是否在导航时滚动到顶部
• prefetch：是否在页面加载时预取链接
• passHref：将 href 传递给子元素（通常用于自定义组件）

示例：

import Link from 'next/link'

function Navigation() {
  return (
    <nav>
      <Link href="/" passHref>
        <a>首页</a>
      </Link>
      <Link href="/about" passHref>
        <a>关于</a>
      </Link>
    </nav>
  )
}

推荐使用 <Link> 而不是 <a>

通过 <a> 会导致整个页面刷新，而使用 <Link> 只会更新部分内容（例如，页面的某个部分或组件）。

编程式导航

useRouter 钩子用于在组件中访问路由对象。

支持的属性：

• push：导航到新页面
• replace：替换当前页面
• back：返回上一页
• forward：前进到下一页

示例：

'use client'
import { useRouter } from 'next/navigation'

function MyComponent() {
  const router = useRouter()

  const handleNavigation = () => {
    router.push('/about')
    // router.replace('/about')
    // router.back()
    // router.forward()
  }

  return <button onClick={handleNavigation}>Go to About</button>
}

匹配当前路由的链接

可通过 usePathname 钩子获取当前路由路径。

'use client'
import { usePathname } from 'next/navigation'

const navLinks = [
  { name: '首页', href: '/' },
  { name: '关于', href: '/about' },
]

function Layout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()

  return (
    <nav>
      {navLinks.map(({ name, href }) => {
        const isActive = pathname.startsWith(href)
        return (
          <Link className={isActive ? 'active' : ''} href={href} key={href}>
            {name}
          </Link>
        )
      })}
    </nav>
  )
}