GatsbyJS向Link跳转页面传参时defaultProp不生效如何解决

• location.state 基于浏览器History API实现，仅通过站内<Link>跳转时会携带对应数据。页面刷新、用户直接输入地址访问时，浏览器历史栈无对应记录，location.state 会直接返回null。你写的解构默认值const { state = {} } = location仅在state为undefined时生效，null无法触发该兜底逻辑，因此会出现访问属性报错。
• defaultProps仅在对应prop完全未传递时生效，Gatsby已主动给Locations组件传递了location属性，仅该属性内部的state值为null，因此你配置的defaultProps不会触发。

方案1：直接修改组件内的兜底逻辑（无需修改跳转逻辑） #

直接调整状态读取逻辑，覆盖null场景即可，修改成本最低：

const Locations = ({ location }) => {
  // 兼容state为null/undefined的场景，兜底为空对象
  const state = location.state || {}
  // 解构时直接加默认值，兜底为ALL
  const { serviceCategory = "ALL" } = state

  const [category, setCategory] = useState(serviceCategory)
  // 后续业务逻辑保持不变
}

export default Locations

方案2：参数放到查询字符串中（持久化参数，刷新不丢失） #

如果serviceCategory参数需要支持用户收藏链接、分享后仍能生效，建议将参数放到URL查询字符串中：
跳转代码修改：

<Link
  to="/locations?serviceCategory=FILTER"
>

组件内读取逻辑：

import { useEffect, useState } from 'react'

const Locations = ({ location }) => {
  const [category, setCategory] = useState("ALL")

  useEffect(() => {
    const searchParams = new URLSearchParams(location.search)
    const categoryParam = searchParams.get('serviceCategory')
    if (categoryParam) {
      setCategory(categoryParam)
    }
  }, [location.search])
  // 后续业务逻辑保持不变
}

export default Locations

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