React中使用react-router-dom如何向SingleCharacter单组件传递数据

首先在项目根组件（通常是App.js）中配置路由规则，匹配列表页和详情页的访问路径：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Cards from './components/Cards/Cards'
import SingleCharacter from './components/SingleCharacter/SingleCharacter'

function App() {
  return (
    <Router>
      <Routes>
        {/* 角色列表页路由 */}
        <Route path="/" element={<Cards />} />
        {/* 角色详情页路由，:id为动态路径参数，对应角色id */}
        <Route path="/character/:id" element={<SingleCharacter />} />
      </Routes>
    </Router>
  )
}

export default App

在详情组件内获取路由携带的角色id，调用已经封装好的getCharacter接口请求数据，再渲染详情内容：

import React, { useState, useEffect } from 'react'
// 从react-router-dom导入获取路由参数的钩子
import { useParams } from 'react-router-dom'
import { getCharacter } from '../../API'
import { Wrapper } from './SingleCharacter.styles'

const SingleCharacter = () => {
  // 获取路由路径中的id参数
  const { id } = useParams()
  const [character, setCharacter] = useState(null)
  const [loading, setLoading] = useState(true)

  // 根据id请求角色详情
  useEffect(() => {
    const fetchCharacter = async () => {
      try {
        const res = await getCharacter(id)
        setCharacter(res)
      } catch (err) {
        console.error('获取角色详情失败：', err)
      } finally {
        setLoading(false)
      }
    }
    fetchCharacter()
  }, [id])

  // 加载状态展示
  if (loading) return <Wrapper><p>加载中...</p></Wrapper>
  // 无数据兜底展示
  if (!character) return <Wrapper><p>未找到对应角色</p></Wrapper>

  // 解构数据渲染详情
  const { name, image, species, gender, status, origin, location } = character
  return (
    <Wrapper>
      <img src={image} alt={name} />
      <h1>{name}</h1>
      <p>状态：{status}</p>
      <p>物种：{species}</p>
      <p>性别：{gender}</p>
      <p>出生地：{origin.name}</p>
      <p>当前位置：{location.name}</p>
    </Wrapper>
  )
}

export default SingleCharacter

• 可以删除Cards组件中未使用的character状态、注释掉的getCharacterFromAPI方法，避免冗余代码。
• 可根据需求自行调整SingleCharacter组件的渲染内容和样式。

内容的提问来源于stack exchange，提问作者Ricardo de Paula