I'm trying to get the param part of this url: http://myapp.com/123 using this code:
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>
);
}
but somehow the id variable is undefined
Configure a router, something like this, the 2 dots and an identifying word. path="movie/:id" or path="movie/:nameurl". Check which version of dom router you are using, you should use version 6, I have read their documentation and help. With what I said above it should be solved.
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>
);
};