En mi código de reacción estoy enfrentando dificultades. Quiero imprimir el nombre del producto en función de su identificación, donde el producto se obtendrá de product.js. Estoy usando el enrutador para mostrar diferentes productos sin recargar.
import product from './product' export default function ProductScreen({match}) { const products=product.find(p=>p._id === match.params.id) return ( <div> {products.name} </div> ) } La consola muestra
Uncaught TypeError: Cannot read properties of undefined (reading 'params') at ProductScreen El código para el enrutador es
<Router> <Routes> <Route path="/" element={<HomeScreen />} exact/> <Route path="/product/:id" element={<ProductScreen />} /> </Routes> </Router>Y el archivo del producto es
const product=[ { _id:'1', name : 'Shoes', images : '/img/shoe4.jfif', discription : 'Lorem10j,jdscjscjc nxkd kdn ddksad asdkjdhsadb' } ]Puedes usar useParams()
import { useParams } from "@reach/router" // route: /user/:userName const User = () => { const params = useParams(); return <h1>{params.userName}</h1> )puede obtener el parámetro de consulta en productScreen.js:
import {useRouter} from 'react-router-dom' const {id} = useRouter(); const [data , setData] = useState({}); useEffect(() => { if(id){ const products=product.filter(p=>p._id == id); setData(products); } },[id]) return ( <div> {data?.name} </div>