React中如何实现跳转单篇文章页并按id加载对应标题正文？

步骤1：修正路由与跳转路径的语法错误 #

你当前的路由配置和跳转链接的动态参数格式不符合React Router规范，先做如下修改：

1. 调整路由配置里的单页路径

// 原错误写法
<Route path='/single-post:id'>
  <SinglePost />
</Route>
// 修改为
<Route path='/single-post/:id' exact>
  <SinglePost />
</Route>

2. 调整Post组件内的跳转链接

// 原错误写法
<Link to={`/single-post:${id}`}>
// 修改为
<Link 
  to={{
    pathname: `/single-post/${id}`,
    // 这里写入当前文章的完整数据，供方案一使用
    state: { title, body, id }
  }}
>

实现方案1：通过路由state传递数据（无需二次请求） #

适合列表页已经拿到全量文章数据的场景，直接把当前点击的文章数据通过跳转参数传给单页：
修改SinglePost组件，用useLocation钩子获取传递的state数据：

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

const SinglePost = () => {
  const location = useLocation()
  // 从路由state中提取文章数据
  const { id, title, body } = location.state || {}

  return (
    <section>
      <p>{id}</p>
      <h1>{title}</h1>
      <h2>{body}</h2>
      <p>hey</p>
    </section>
  )
}

export default SinglePost

注意：该方案如果用户直接在地址栏输入单页地址，state会为空，可搭配404跳转或兜底文案处理

实现方案2：单页内根据文章ID单独请求数据（支持直接访问单页地址） #

如果需要支持用户直接访问单页链接、或者列表页数据不全的场景，用该方案：
修改SinglePost组件，先通过useParams获取路由上的id，再发请求拉取对应文章数据：

import { useParams } from 'react-router-dom'
import { useState, useEffect } from 'react'

const SinglePost = () => {
  // 获取路由上的id参数
  const { id } = useParams()
  const [post, setPost] = useState({})
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchPost = async () => {
      try {
        const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
        const data = await res.json()
        setPost(data)
      } catch (err) {
        console.error('获取文章失败', err)
      } finally {
        setLoading(false)
      }
    }
    fetchPost()
  }, [id])

  if (loading) return <Loading />

  return (
    <section>
      <p>{post.id}</p>
      <h1>{post.title}</h1>
      <h2>{post.body}</h2>
      <p>hey</p>
    </section>
  )
}

export default SinglePost

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