I'm new to React, and I'm writing a web store front-end using react router dom to generate pages for the specific product. I split the url for the product page to get product ID and pass that ID as a prop to product class components (like product images, price, qunaitiy, description...), the components then make separate apollo queries for the information they need to properly render. The routes part of the code looks like this:

<Routes>
    <Route path="/" element={<App />} />
    <Route exact path="/:productCategory" element={<CategoryComponent />} />
    <Route exact path="/:productCategory/:productID" element={<ProductPageComponent />} />
</Routes>

I have some doubts about using javascript to split the url and get the product ID from it - it works fine, but somehow feels hacky - is there a better way? I cannot use useParams or any hooks at all - I must use class components for this.