使用onClick触发navigate跳转时如何将id传递给SinglePost？

基于react-router-dom v6 版本，一共有3种常用传参方案，可根据业务场景选择：

方案1：动态路由参数（优先推荐） #

适合id这类必传核心参数，参数直接拼接在URL路径中，页面刷新、链接分享时参数都不会丢失，对SEO友好。

• 先修改路由表配置，为单篇文章路由添加动态参数占位符：

// 路由配置文件
<Route path="/single/:id" element={<SinglePost />} />

• 修改图片的点击跳转逻辑，把当前post的id拼接在目标路径后：

<img 
  onClick={() => navigate(`/single/${post.id}`)} 
  className="postImages" 
  src={post.img_url} 
  alt={post.title} 
/>

• 在SinglePost组件中引入useParams hook 读取传递的id：

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

const SinglePost = () => {
  // 注意：通过useParams取出的id默认是字符串类型，需要数字格式可手动转Number(id)
  const { id } = useParams()

  // 拿到id后就可以调用接口请求对应文章详情数据
  return <div>当前文章ID：{id}</div>
}

方案2：search查询参数传参 #

适合非必传的可选参数，参数会拼接在URL的?后缀中，最终地址格式为/single?id=xxx

• 跳转时直接在路径后拼接查询串，或者通过配置项传search参数：

// 写法1：直接拼接路径
onClick={() => navigate(`/single?id=${post.id}`)}

// 写法2：通过配置项传参
onClick={() => navigate('/single', { search: `id=${post.id}` })}

• 在SinglePost组件中引入useSearchParams hook读取参数：

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

const SinglePost = () => {
  const [searchParams] = useSearchParams()
  const id = searchParams.get('id')

  return <div>当前文章ID：{id}</div>
}

方案3：state隐式传参 #

传递的参数不会显示在URL地址栏，适合传递临时的、不需要暴露在链接中的参数，注意：如果用户复制链接在新标签页打开，state参数会丢失，需要做好空值兜底。

• 跳转时在navigate的第二个配置参数中传入state字段：

onClick={() => navigate('/single', { state: { id: post.id } })}

• 在SinglePost组件中引入useLocation hook读取参数：

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

const SinglePost = () => {
  const location = useLocation()
  // 加可选链操作符，避免用户直接访问页面时state为null抛出报错
  const id = location.state?.id

  return <div>当前文章ID：{id}</div>
}

提示：如果id是请求文章详情的核心必传参数，优先选择第一种动态路由方案，稳定性和兼容性最好。

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