Tengo un problema para obtener el resultado del valor del objeto "coincidencia" en este código de enrutamiento de parámetros.
Esta es la clase donde uso match:
import React from "react"; const ProductDetails = (props) => { console.log(props.match); return <h1>Details No. </h1>; }; export default ProductDetails;Y el código que uso para usar la ruta es:
import React, { Component } from "react"; import NavBar from "./navbar"; import ProductDetails from "./productDetails"; class App extends Component { render() { return ( <React.Fragment> <NavBar productsCount={this.state.Product.filter((p) => p.count > 0).length} /> <main className="container"> <Routes> <Route path="/about" element={<About />} /> <Route path="/" element={<Home />} /> <Route path="/contact" element={<Contact />} /> <Route path="/cart" element={ <ShoppingCart products={this.state.Product} onReset={this.resetData} onIncrement={this.incrementEntry} onDelete={this.deleteEntery} /> } /> <Route path="/products/:id" element={<ProductDetails />} /> </Routes> </main> </React.Fragment> ); } }Y obtengo la respuesta como "indefinido" y muchos mensajes de error rojos.
¿Qué es elemento? Si usa react-router-dom para el enrutamiento, debe configurar el componente para cualquier ruta.
<BrowserRouter> <Route path ="/about" component= {<About />} /> <Route path ="/" component= {<Home/>}/> <Route path ="/contact" component= {<Contact/>}/> <Route path ="/cart" component= {<ShoppingCart products= {this.state.Product} onReset ={this.resetData} onIncrement ={this.incrementEntry} onDelete = {this.deleteEntery}/>}/> <Route path="/products/:id" component={<ProductDetails />}/> </BrowserRouter>si está utilizando reaccionar enrutador v6 y lo que quiere hacer es obtener la identificación, sería:
import React from "react"; const ProductDetails = () => { const {id} = useParams(); return <h1>Details No. {id}</h1>; }; export default ProductDetails;o si realmente quieres el objeto de coincidencia:
import React from "react"; const ProductDetails = () => { const match = useMatch(); return <h1>Details No.</h1>; }; export default ProductDetails;