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

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

vahid alizadeh · Accepted Answer · 2022-06-01 15:07:46Z

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 1, 2022 at 15:07

vahid alizadeh

11 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

sarangkkl Over a year ago

cant use react hooks cant be used inside class base components

vahid alizadeh Over a year ago

try this. this.props.match.params. check this stackoverflow.com/questions/60316049/…

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related