Next.js App Router替换router.isReady方案咨询（含代码示例）

useQuery 场景修改 #

在 Page Router 中，router.isReady 用于确保路由就绪后再触发查询，但 App Router 中无需此判断——客户端组件的路由相关数据（如 params、searchParams）在渲染时已处于稳定状态。

结合你的业务逻辑，原查询的核心前提是 uniqueKey 和 email 存在，因此直接将 enabled 条件替换为这两个参数的存在性判断即可，既精准控制查询时机，也替代了 router.isReady 的作用：

useQuery({
    queryKey: ['validateSetPassword', uniqueKey, email],
    queryFn: async () => {
      if (uniqueKey && email) {
        try {
          const response = await validateSetPasswordApi(uniqueKey, email)
          setValidKey(true)
          return response
        } catch (error) {
          setValidKey(false)
          return null
        }
      } else {
        router.push('/login')
      }
    },
    onSuccess: (validateSetPassword: any) => {
      if (validateSetPassword) {
        formik.values.firstName = validateSetPassword.data.firstName
        formik.values.lastName = validateSetPassword.data.lastName
        formik.values.email = email
        setData(validateSetPassword)
      }
    },
    // 替换 router.isReady：仅当参数就绪时触发查询
    enabled: !!uniqueKey && !!email
  })

useEffect 场景修改 #

对于依赖路由参数的 useEffect，App Router 提供了 useSearchParams 和 useParams 钩子，它们返回的对象本身即可作为依赖项，无需再依赖 router.isReady：

针对 searchParams 的场景 #

import { useSearchParams } from 'next/navigation'

// ...

const searchParams = useSearchParams()

useEffect(() => {
    const token = searchParams.get('token')
    setToken(token)
  }, [searchParams]) // 直接依赖 searchParams，参数变化时自动触发

未使用 searchParams 的场景（如依赖路由 params） #

如果你的逻辑依赖路由路径参数而非搜索参数，使用 useParams 同理：

import { useParams } from 'next/navigation'

// ...

const params = useParams()

useEffect(() => {
    // 处理 params 中的数据
    const id = params.id
    setId(id)
  }, [params])

内容的提问来源于stack exchange，提问作者HNG