useParams returns ':1', ':2', ':3' instead of '1' , '2', '3'

December 23, 2022

So I’m trying to use useParams reactrouterhook to get id of superhero, to further make request to my server with such id. When in RQsuperherous.js I click on Link and get transported on adress http://localhost:3000/SuperHeroes/:2 as intended, yet in console.log my id equils = ‘:1’, ‘:2’, ‘:3’, and so on, and I cant make request to server.

I’m using react router 6.x
I’m not sure about adress ‘/SuperHeroes/:id’ in App.js. Maybe it should be nested.

my App.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;

my superHero page

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>
  )
}

my RQsuperherous.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>
            )
          })
        )
      }
    </>
  )
}

Edited:
if in RQsuperherous component in Link path change to SuperHeroes/${el.id}
I have an error in console : No routes matched location