Next.js-命令式路由

在 Next.js 中，我们可以使用两种类型的路由：命令式路由（Imperative Routing）和声明式路由（Declarative Routing）。命令式路由是在页面间进行编程式转换的一种方式，它允许您在需要时直接使用 JavaScript 代码进行跳转。

使用方法：

使用命令式路由最简单的方式是使用 Next.js 的内置 API router。这个 API 有一个 push 方法，允许您从 JavaScript 代码中跳转到具有给定 URL 的页面。

import { useRouter } from 'next/router'

function goToAboutPage() {
  const router = useRouter()
  router.push('/about')
}

此代码将导航到名为 about 的页面。您也可以在 push 方法的第二个参数中传递任何查询字符串参数：

router.push({
  pathname: '/about',
  query: { name: 'abc' },
})

此代码将跳转到 /about?name=abc。

编程式地预加载页面

命令式路由也支持编程式预加载。这在需要异步数据时非常有用，因为它允许我们在页面渲染之前异步获取数据。

import { useRouter } from 'next/router'
import { useEffect } from 'react'

function HomePage() {
  const router = useRouter()

  useEffect(() => {
    // 预加载 pageA，然后通过回调在跳转之前获取 data。
    router.prefetch('/pageA').then(() => {
      console.log('prefetched!')
    })
  }, [])

  function handleClick() {
    router.push({
      pathname: '/pageA',
      query: { data: 'payload' },
    })
  }

  return <button onClick={handleClick}>Go to pageA</button>
}

监听路由变化

您可以通过监听 routeChangeStart 和 routeChangeComplete 事件来处理路由变化。例如，您可以在导航过程中显示进度条或处理页面跟踪。

import { useRouter } from 'next/router'
import { useState, useEffect } from 'react'

function ProgressBar() {
  const [loading, setLoading] = useState(false)
  const router = useRouter()

  useEffect(() => {
    const handleStart = () => setLoading(true)
    const handleComplete = () => setLoading(false)

    router.events.on('routeChangeStart', handleStart)
    router.events.on('routeChangeComplete', handleComplete)
    router.events.on('routeChangeError', handleComplete)

    return () => {
      router.events.off('routeChangeStart', handleStart)
      router.events.off('routeChangeComplete', handleComplete)
      router.events.off('routeChangeError', handleComplete)
    }
  }, [])

  return loading && <div>loading...</div>
}

总结

总的来说，命令式路由是一种用于在 Next.js 应用程序中跳转页面的强大方式。不同于声明式路由，您可以使用 JavaScript 代码直接在应用程序的任何部分进行导航。另外，命令式路由还提供了预加载和路由事件等功能，使得应用程序的控制更加灵活。