Entonces, primero permítanme plantear el motivo de la pregunta. Tengo una página de listado de productos en la que intento filtrar productos usando la categoría.

Nota: No puedo usar ningún gancho porque estoy dentro del componente basado en clases. Estoy escribiendo una prueba que tiene especificaciones. No puedo usar un componente basado en funciones.

<Route exact path="/:category" element={<ProductListing/>}/>

Esta es mi ruta en este momento. Tengo tres categorías (Todas, Ropa, Tecnología) y las tomo de la API, así que no puedo crear una ruta separada para las categorías. Mi problema es cuando hago clic en los enlaces, la URL cambia pero el componente no. renderícese solo, por favor, ayuda, ¿cómo puedo solucionar este error con el código base existente?

Así es como estoy representando mis enlaces

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