react-router使用Link传递courseid到新页面无法访问如何解决

• 你查询到的location.state是react-router维护的路由上下文对象，不是浏览器原生的window.location，原生window.location没有state属性，这是你报类型错误的核心原因。
• 首次报"unexpected use of location"是因为你没有引入react-router提供的能力获取路由对象，直接调用了全局下未定义的location变量。

方案1：继续使用state传参（仅适用于跳转后无刷新操作的场景） #

适合不需要支持用户刷新/holes页面的场景，用法如下：

1. 在/holes页面对应的组件内引入react-router提供的useLocation钩子：

import { useLocation } from 'react-router-dom'

2. 组件内部调用钩子获取路由对象，取值时加可选链防未定义报错：

const HolesPage = () => {
  const location = useLocation()
  const courseid = location?.state?.courseid
  // 后续业务逻辑
}

注意：该方案下用户手动刷新页面、或直接在地址栏输入/holes地址访问时，state会丢失，courseid无法获取。

方案2：动态路由传参（更推荐，适配你的业务场景） #

你需要用courseid做表单提交关联，推荐用不会因刷新丢失的动态路由参数，实现方式：

1. 修改你的路由配置，将原/holes路由规则修改为：

// 路由配置示例
{
  path: '/holes/:courseid',
  element: <HolesPage />
}

2. 修改courseListItem组件内的Link写法：

<Link to={`/holes/${props.course.id}`}>
  <button  
    className="btn btn-primary tooltips float-left" 
    data-placement="left" 
    data-toggle="tooltip" 
    data-original-title="view"
  >
    <i className="fa fa-edit"></i> 
  </button>
</Link>

3. 在HolesPage组件内用useParams钩子取参数：

import { useParams } from 'react-router-dom'

const HolesPage = () => {
  const { courseid } = useParams()
  // 取到的courseid是字符串格式，需要数字的话可以用Number(courseid)转换
  // 后续表单提交直接使用即可
}

该方案下参数会携带在地址栏中，用户刷新页面、收藏地址后再次访问都可以正常拿到courseid，完全适配你表单提交关联课程的需求。

• 如果你使用的是react-router-dom v5版本，类组件可以直接从props中取location（state传参场景）或match.params（动态路由场景），无需单独引入钩子。
• 建议添加参数校验逻辑，当courseid未获取到时，引导用户返回课程列表页重新跳转，避免用户填写完表单后无法提交。

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