estoy utilizando el hook de useParams pero este me devuelve undefined, en lugar de devolverme un número.
const App = () => {
return (
<BrowserRouter>
<Navegador/>
<Routes>
<Route path='/' element= {<ItemListContainer/>}/>
<Route path='/productos/:categoriaId' element= {<ItemListContainer/>}/>
<Route path='/item/:itemId' element= {<ItemDetailContainer/>}/>
</Routes>
</BrowserRouter>
)
}
Aqui utilizo el useParam para obtener el itemId.
import { useEffect, useState } from "react"
import { pedirDatos } from "../../helpers/pedirDatos"
import { useParams } from 'react-router-dom'
import '../../assets/styles/item.css'
import ItemDetail from "../ItemDetail/ItemDetail"
export const ItemDetailContainer = () => {
const { itemId } = useParams();
const [item, setItem] = useState(null)
const [loading, setLoading] = useState(true)
console.log(item);
useEffect(() => {
setLoading(true)
pedirDatos()
.then((res) => {
setItem(res.find((prod) => prod.id === Number(itemId) ))
})
.catch(err => console.log (err))
.finally(() => {
setLoading(false)
})
}, [itemId, setLoading])
return (
<div>
{loading ? <div className="spinner"></div>
: <ItemDetail item={item} />}
</div>
)
}
Si hago un console.log del itemId me sale "NaN" y si le saco el parseo a número me sale la palabra "id".. no sé como arreglarlo. Debería dar como resultado un número que coincida con prod.id, pero por alguna razón no lo esta tomando así..
El link:
<Link to={`/item/id`}>