how to render to a page whenever user click to a dynamic url ReactJS?

Question

what i am trying to solve is, how to render to a specific page whenever user click to dynamic url? for more specific, there is my \"product_list\" api data. in \"product_list\"

Answer 1

For dynamic URLs, you may not want to go with absolute paths. Consider shifting to query parameters.

Change url to http://localhost:8000/api/p?id=product01. In routing, render ProductDetailContainer for url 'http://localhost:8000/api/p'.

function ProductDetailContainer() {
    const query = new URLSearchParams(useLocation().search); // useLocation in react-router

    return ;
}

function ProductDetail({id}) {
    return ({id}); // Render details based on the ID fetched.
}

Code above is not tested. Please adapt accordingly :)

Hope it helps.