Reading URL Params in React Router

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