So first let me put the ground of the question I have a Products listing page where I am trying to filter products using category
Note: I am not allowed to use any hook because I am inside the class-based component I am writing a test that has specifications I cant use a function-based component
<Route exact path="/:category" element={<ProductListing/>}/>
This is my route right now I have three categories(All, Clothes, Tech) and I am taking them from API so I cant create a separate route for the categories my problem is when I click on the links the URL change but the component not render itself please help how can i fix this bug with existing codebase
Here is how i am rendering my links
{this.state.categories.categories.map((item,index)=>(
<NavLink key={index} to={`/${item.name}`} className={({ isActive }) => isActive? "active": ''}>{item.name[0].toUpperCase()+item.name.substring(1)}</NavLink>
))}
You can use the below code in your component to get the values from the URL.
const params = useParams()
then based on your parameter you can have access to the value.
let UrlValue = params.category;