Gatsby Link传递Props时目标页面访问属性报错问题求助

两个报错的根因如下：

1. location未定义：Gatsby页面中不能直接调用全局location对象，需要通过Gatsby注入的props或者官方提供的useLocation钩子获取location实例。
2. TypeScript报错Property 'state' does not exist on type 'Location'：默认的Location类型没有定义你传递的自定义state字段，需要补充类型声明。

具体修复步骤 #

步骤1：修复location未定义问题 #

在pay-on-line页面中引入Gatsby自带的useLocation钩子获取location实例，同时添加空值判断避免直接访问页面时state不存在导致的报错：

import React, { useState, useEffect } from 'react'
import Layout from '../components/layout/layout'
import { useNumbers } from '../components/NumbersProvider/NumbersProvider'
import { useQueryParam } from '../hooks/useQueryParam'
// 引入Gatsby内置的useLocation钩子
import { useLocation } from 'gatsby'

const PayOnline = () => {
  // 获取当前页面的location实例
  const location = useLocation()
  
  // 建议将state读取逻辑放在useEffect中，避免静态构建阶段访问浏览器对象报错
  useEffect(() => {
    // 用可选链做兜底，避免用户直接访问该页面时state为undefined的报错
    console.log(location?.state?.myProp)
  }, [location])

  return (
    // 页面原有渲染内容
    <></>
  )
}

export default PayOnline

步骤2：修复TypeScript类型报错 #

如果你的项目是TypeScript项目，给useLocation传入泛型定义state的类型即可：

// 定义你传递的state字段类型，替换为agentID的实际类型即可
type PageState = {
  myProp?: string | number
}

const PayOnline = () => {
  // 给useLocation传入定义好的泛型
  const location = useLocation<PageState>()
  // 后续使用location.state.myProp就不会触发类型报错
}

额外注意事项 #

• Gatsby的Link组件传递的state仅在通过该链接跳转时生效，如果用户直接在地址栏输入pay-on-line页面地址访问，state的值会是undefined，所以必须添加空值判断兜底。
• 不要在静态构建阶段执行的代码中直接访问location，放在useEffect中执行可以避免构建时报错。
• 你的发送页Link传递state的代码没有问题，不需要修改。

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