所以我尝试使用useParams reactrouterhook来获取超级英雄的id，以进一步向我的服务器发出这样的id请求。当在RQsuperherous.js中，我点击链接并按预期在地址http：//localhost：3000/SuperHeroes/：2上传输时，但在console.log中，我的id等于'：1'，'：2'，'：3'，等等，我无法向服务器发出请求。
我使用的是React路由器6.x，我不确定App.js中的地址“/SuperHeroes/：id”，也许它应该嵌套。
我的应用程序. js

import { Route, Routes } from 'react-router-dom';
import { BasicLayout } from './pages/BasicLayout';
import { SuperHerous } from './pages/SuperHerous.page';
import { RQSuperHeroes } from './pages/RQSuperHeroes.page';
import { Home } from './pages/Home.page';
import { SuperHero } from './pages/SuperHero.page';

function App() {
  return (
    <Routes>
      <Route path="/" element={<BasicLayout />}>
        <Route index element={<Home/>} />
        <Route path="/SuperHerous" element={< SuperHerous />} />
        <Route path="/SuperHeroes/:id" element={< SuperHero />} />
        <Route path="/RQSuperHeros" element={< RQSuperHeroes />} />
      </Route>
    </Routes>
  );
}

export default App;

我的超级英雄页面

import { useParams } from 'react-router-dom';
import { useSuperHero } from '../hooks/useSuperHero';

export const SuperHero = () => {
  const id  = useParams();
  const { isLoading, data, isError, error } = useSuperHero({id});

  console.log(id)

  if (isLoading) {
    return <h2>Loading...</h2>
  }

  if (isError) {
    return <h2>{error.message}</h2>
  }

  return (
    <div>
      <h1>{data.name}</h1>
      <h1>{data.alterago}</h1>
      xfcghjk
    </div>
  )
}

我的RQ超级英雄. js

import { useSuperHero } from "../hooks/useSuperHero"
import { Link } from "react-router-dom";

export const RQSuperHeroes = () => {
  const onSuccess = (data) => {
    console.log('Perform side effect after data fetching', data)
  }

  const onError = (error) => {
    console.log('Perform side effect after encountering error', error.message)
  }

  const { data, isLoading, isError, error, isFetching, refetch } = useSuperHero({onSuccess, onError});

  if (isLoading) {
    return <h2>Loading...</h2>
  }

  if (isError) {
    return <h2>{error.message}</h2>
  }

  console.log(isLoading, isFetching)

  return (
    <>
      <div>RQ SuperHeroes Page</div>
      <button onClick={refetch}>Fetch heroes</button>
      {
        data && data.length && (
          data.map(el => {
            return (
            <Link to={`SuperHeroes/:${el.id}`} key={el.id}>
              <div className='super' >
                <h2>{el.name}</h2>
                <p>{el.alterego}</p>
              </div>
            </Link>
            )
          })
        )
      }
    </>
  )
}

编辑：如果在链接路径中的RQ superherous组件更改为SuperHeroes/${el.id}，则控制台中会出现错误：没有与位置匹配的路径
“/RQ超级英雄/超级英雄/1”