how to render the correct component in routes NextJs

Question

I have a problem when I change routes. Between pages it renders me fine. But when I need a dynamic route it does not render me. In routes I have the folder uw and inside [table].js

When I put the manual routes uw/first and I want to go to uw/second, the first one does render well and then the second one sticks to the style of the first one and it does not bring me the correct data for that view

 const menuItems = [
    {
        href: '/dashboard',
        title: 'Inicio',
        icon: 'fluent:home-16-filled',
    },
    {
        href: '/uw/primera' ,
        title: 'Cartera',
        icon: 'bxs:user',
    },
    {
        href: '/uw/segunda',
        title: 'Cartera',
        icon: 'bxs:user',
    },
];

and then return the routes

<div>
   <aside className="main-aside">
      <div className="main-aside-image">
         <Image 
            src="/logo-castor.png" 
            alt=""      
            width={198}
            height={32}/>
      </div>
      <nav>
         <ul className="main-aside-items">
            <div className="main-aside-categories">
               {menuItems.map(({ href, title, icon }) => (
               <li className="main-aside-item-categories" key={title}>
                  <Link href={href}>
                  <a
                  className={`flex p-2 bg-fuchsia-200 rounded hover:bg-fuchsia-400 cursor-pointer ${
                  router.asPath === href && 'bg-fuchsia-600 text-white'
                  }`}
                  >
                  {title}
                  </a>
                  </Link>
               </li>
               ))}
            </div>
         </ul>
      </nav>
   </aside>
</div>

Answer 1

You're using the title as the key inside the map, since the title is the same between uw/primera and uw/segunda it won't update the component.

Changing the key to the href could solve that.

<li className="main-aside-item-categories" key={title}>

to

<li className="main-aside-item-categories" key={href}>