Last Updated on April 11, 2022 by Pupli
App.tsx
function App() { return ( <div> <Navbar/> <Routes> <Route path="/welcome" element={<Welcome/>}/> <Route path="/products" element={<Products/>}/> <Route path="/products/:product" element={<Product/>}/> </Routes> </div> ); }
Products.tsx
import {useParams} from 'react-router-dom' function Product() { let params = useParams(); return ( <div> <strong>Product : </strong>{params.product} </div> ); } export default Product;
References
https://reactrouter.com/docs/en/v6/getting-started/tutorial#reading-url-params