Estoy tratando de representar los parámetros en la URL como un h2 en el sitio web. Pero incluso cuando intento console.log useParams está vacío.
Aquí está mi archivo Router.js
const Webpages = () => { return ( <Router> <Routes> <Route exact path="/" element={Home()} /> <Route exact path="/comics" element={Comics()} /> <Route path='/comics/:comicId' element={Comic()} /> <-------------- <Route exact path="/portfolio" element={Portfolio()} /> <Route exact path="/blog" element={Blog()} /> <Route exact path="/contact" element={Contact()} /> <Route exact path="/store" element={Store()} /> <Route path="*" element={NotFound()} /> </Routes> </Router> ); }; export default Webpages;Aquí está mi componente cómico
import React from 'react'; import NavBar from '../../components/NavBar'; import { useParams } from 'react-router-dom'; function Comic() { let { comicId } = useParams(); console.log(comicId); return ( <div> <NavBar /> <p>{comicId}</p> </div> ) } export default ComicEl elemento de página cuando voy a un cómic aleatorio funciona bien, como localhost:3000/comics/465456 pero el
la etiqueta está vacía y el registro de la consola no está definido, tampoco está definido si solo intento usar el registro de la consola useParams()
Estás invocando directamente la función React. La invocación directa de funciones de React no es la forma en que funciona React.
El element prop del componente Route espera un React.ReactNode , también conocido como JSX. Pase los componentes como JSX. El JSX se transfiere a Javascript estándar y el marco React maneja la llamada a su función dentro de los límites del ciclo de vida del componente React.
Ejemplo:
const Webpages = () => { return ( <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/comics" element={<Comics />} /> <Route path='/comics/:comicId' element={<Comic />} /> <Route path="/portfolio" element={<Portfolio />} /> <Route path="/blog" element={<Blog />} /> <Route path="/contact" element={<Contact />} /> <Route path="/store" element={<Store />} /> <Route path="*" element={<NotFound />} /> </Routes> </Router> ); };