Nextjs 如何更改 URl 而不刷新页面

在 Next.js 中，可以使用 next/router 中的 Router 对象或者 useRouter 钩子来实现不刷新页面的 URL 变更，这主要通过 HTML5 的 History API 来完成。这种方式通常被用于构建单页应用（SPA），让用户的体验更加流畅。下面是几种常用的方法：

1. 使用 Router.push 或 Router.replace

Router.push 方法可以更改 URL 并向历史记录中添加一个新的记录，而 Router.replace 则替换当前的历史记录。如果不需要将更改的 URL 添加到浏览器的历史堆栈中，应该使用 Router.replace。

示例代码：

javascript
import { useRouter } from 'next/router'

function MyComponent() {
  const router = useRouter();

  const handleClick = () => {
    router.push('/new-page')
  }

  return (
    <button onClick={handleClick}>Go to new page</button>
  )
}

2. 使用 Link 组件

Next.js 提供了一个 Link 组件，它允许你通过声明方式更改 URL。使用 Link 组件时，页面不会进行全面刷新，只会加载新的页面内容。

示例代码：

javascript
import Link from 'next/link'

function NavigationMenu() {
  return (
    <nav>
      <Link href="/about">
        <a>About Us</a>
      </Link>
      <Link href="/services">
        <a>Our Services</a>
      </Link>
      <Link href="/contact">
        <a>Contact Us</a>
      </Link>
    </nav>
  )
}

3. 使用动态路由

Next.js 同样支持动态路由，这允许你根据一些数据来动态更改 URL。比如，你有一个博客，想根据文章的 ID 来显示不同的文章。

示例代码：

javascript
import { useRouter } from 'next/router'

function Post() {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

在以上代码中，如果你访问 /post/1，组件将显示“Post: 1”。

通过这些方法，Next.js 使得在不重新加载页面的情况下更改 URL 变得非常简单和高效。这不仅提高了用户体验，还有助于构建现代的、高效的 web 应用。