Next.js 遇到使用 Link 跳转页面无法获取路由参数的问题解决

在使用 Next.js 进行前端开发时，我们经常使用到路由参数来获取页面信息。然而，在使用 Link 组件跳转页面时，有时会遇到无法获取路由参数的问题。这篇文章将详细介绍这个问题的原因，并提供解决方法。

问题描述

当我们使用 Link 组件进行页面跳转时，使用 useRouter() 钩子获取路由参数时，有时会出现参数为空的情况，例如：

import { useRouter } from 'next/router'

function MyPage() {
  const router = useRouter()
  const { id } = router.query
  console.log(id) // 输出 null
  // ...
}

这时，我们会发现路由参数 id 的值为 null，无法获取到正确的参数值。

问题原因

这个问题的原因是 Next.js 在使用 Link 组件进行页面跳转时，会使用浏览器的 pushState() 方法来改变 URL，而这个方法是异步的。因此，当我们使用 useRouter() 钩子获取路由参数时，有可能还没有更新完毕，导致获取到的参数为空。

解决方法

要解决这个问题，我们可以使用 useEffect() 钩子来监听路由参数的变化，例如：

// javascriptcn.com 代码示例
import { useRouter } from 'next/router'
import { useEffect } from 'react'

function MyPage() {
  const router = useRouter()
  const { id } = router.query

  useEffect(() => {
    console.log(id) // 输出正确的参数值
  }, [id])

  // ...
}

这样，当路由参数发生变化时，useEffect() 钩子会重新执行，从而获取到正确的参数值。

另外，我们也可以使用 getInitialProps() 方法来获取路由参数。这个方法会在页面加载时执行，因此可以确保获取到正确的参数值，例如：

function MyPage({ id }) {
  // ...
}

MyPage.getInitialProps = async ({ query }) => {
  return { id: query.id }
}

这样，我们就可以在页面加载时获取到正确的路由参数了。

示例代码

下面是一个完整的示例代码，展示了如何使用 useEffect() 钩子来解决这个问题：

// javascriptcn.com 代码示例
import { useRouter } from 'next/router'
import { useEffect } from 'react'

function MyPage() {
  const router = useRouter()
  const { id } = router.query

  useEffect(() => {
    console.log(id) // 输出正确的参数值
  }, [id])

  return (
    <div>
      <h1>My Page</h1>
    </div>
  )
}

export default MyPage

总结

在使用 Next.js 进行前端开发时，我们经常使用到路由参数来获取页面信息。然而，在使用 Link 组件跳转页面时，有时会遇到无法获取路由参数的问题。这篇文章介绍了这个问题的原因，并提供了两种解决方法。希望这篇文章能够帮助大家解决这个问题，提高开发效率。

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