Estoy tratando de obtener la parte del param de esta URL: http://myapp.com/123 usando este código:
import "./styles.css"; import { useParams } from "react-router-dom"; export default function App() { const { id } = useParams(); console.log("id", id); // undefined. why?? return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>{id}</h2> </div> ); } pero de alguna manera la variable id no está undefined
Configure un enrutador, algo como esto, los 2 puntos y una palabra de identificación. ruta="película/:id" o ruta="película/:nombreurl". Verifique qué versión de enrutador dom está usando, debe usar la versión 6, he leído su documentación y ayuda. Con lo que dije arriba debería estar solucionado.
import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import GenresPage from "../pages/genres"; import Home from "../pages/home"; import Layout from "../pages/Layout"; import Movie from "../pages/movie"; export const AppRoutes = () => { return ( <Router> <Routes> <Route path="/" element={<Layout />}> <Route index element={<Home />} /> <Route path="movies" element={<GenresPage />} /> <Route path="movie/:id" element={<Movie />} /> </Route> </Routes> </Router> ); };