Next.js 中如何进行路由跳转？-JavaScript中文网-JavaScript教程资源分享门户

Next.js 是一个基于 React 的服务器渲染框架，它可以让你开箱即用地进行服务器端渲染，而且还支持静态导出和客户端渲染等多种构建方式。在 Next.js 中，路由跳转是一项非常基础的功能，本文将详细介绍如何在 Next.js 应用程序中进行路由跳转。

什么是路由？

在 Web 开发中，路由是指根据不同的 URL 地址渲染不同的页面或组件。例如，当用户访问 https://example.com/about 时，就应该显示关于页面，而当用户访问 https://example.com/contact 时，就应该显示联系页面。

在 Next.js 中，路由是通过页面文件名来定义的。例如，如果你在 pages 目录下创建了一个名为 about.js 的文件，那么当用户访问 https://example.com/about 时，就会自动渲染该页面。

Next.js 中的路由

Next.js 提供了 next/router 模块来管理应用程序内的路由跳转。该模块可以用来执行以下操作：

跳转到另一个页面
更新 URL 地址
监听路由变化事件

跳转到另一个页面

在 Next.js 中，页面之间的路由跳转可以通过导入 next/router 模块然后调用该模块提供的方法来实现。通常，有两种方式来发起路由跳转：使用链接和编程方式。

使用链接

使用链接进行路由跳转是最简单的方式。在 Next.js 中，你可以使用 <Link> 组件来将一个 URL 地址和某个指定的文本或图标绑定起来。当用户点击该组件时，页面会自动跳转到该 URL 对应的页面。

// javascriptcn.com 代码示例
import Link from 'next/link'

function Home() {
  return (
    <div>
      <h1>Welcome to My App!</h1>
      <Link href="/about">
        <a>About</a>
      </Link>
      <Link href="/contact">
        <a>Contact</a>
      </Link>
    </div>
  )
}

export default Home

在上面的示例中，我们使用了 <Link> 组件将 "About" 和 "Contact" 两个链接绑定到了 /about 和 /contact 这两个 URL 地址上。注意，href 属性应该始终以斜线开头。

编程方式

如果你需要在代码中编程方式地切换页面，那么可以使用 Router.push() 方法。它接受一个 URL 地址作为参数，并且会自动跳转到该页面。

import Router from 'next/router'

function login() {
  // 跳转到登录页面
  Router.push('/login')
}

更新 URL 地址

有时候我们不需要跳转到新页面，而是想要改变当前页面的 URL 地址。在 Next.js 中，你可以使用 Router.push() 方法的第二个参数来实现这一目标。

import Router from 'next/router'

function setQueryParam() {
  // 更新 URL 中的查询参数
  Router.push('/about?id=123', '/about?id=123', { shallow: true })
}

在上面的示例中，我们使用了 shallow 选项来更新 URL 中的查询参数而不会完全更新页面。

监听路由变化事件

在 Next.js 中，你可以通过监听路由变化事件来实现一些自定义逻辑，例如页面切换时的动画效果、页面访问权限控制等等。为了监听路由变化事件，你可以通过 Router.events 对象调用其提供的方法来实现。

// javascriptcn.com 代码示例
import Router from 'next/router'

function MyApp({ Component, pageProps }) {
  React.useEffect(() => {
    const handleRouteChange = (url) => {
      // 处理路由变化事件
      console.log('路由变化：', url)
    }

    // 监听路由变化事件
    Router.events.on('routeChangeStart', handleRouteChange)

    // 组件卸载时取消监听
    return () => {
      Router.events.off('routeChangeStart', handleRouteChange)
    }
  }, [])

  return <Component {...pageProps} />
}

export default MyApp

在上面的示例中，我们使用了 useEffect() 钩子来注册和取消路由变化事件的监听器。注意，路由变化事件有多个种类，例如 routeChangeComplete、routeChangeError、beforeHistoryChange 等等，可以根据具体的业务需求来选择相应的事件。

总结

在 Next.js 中进行路由跳转是一个非常基础的功能，但是也是一个必不可少的功能。通过本文的介绍，你应该已经了解如何使用 next/router 模块来进行路由跳转、更新 URL 地址以及监听路由变化事件了。接下来你可以根据自己的业务需求来进一步深入学习，例如使用 URL 匹配参数、动态导入组件等等。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65447ea37d4982a6ebe58933