react router is not mounting the component in a class-based component

Question

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>
            ))}

score 0 · Answer 1 · answered Jun 01 '22 at 15:07

0

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;

answered Jun 01 '22 at 15:07

vahid alizadeh

1
1
1

cant use react hooks cant be used inside class base components – sarangkkl Jun 01 '22 at 15:23
try this. `this.props.match.params`. check this https://stackoverflow.com/questions/60316049/url-parameter-in-react-class-component – vahid alizadeh Jun 02 '22 at 16:20

react router is not mounting the component in a class-based component

1 Answers1