Tengo un problema cuando cambio de ruta. Entre páginas me hace bien. Pero cuando necesito una ruta dinámica no me rinde. En rutas tengo la carpeta uw y dentro [table].js
Cuando pongo las rutas manuales uw/primero y quiero ir a uw/segundo, el primero renderiza bien y luego el segundo se pega al estilo del primero y no me trae los datos correctos para esa vista
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', }, ];y luego devolver las rutas
<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>Está usando el título como clave dentro del map , dado que el título es el mismo entre uw/primera y uw/segunda , no actualizará el componente.
Cambiar la clave a href podría resolver eso.
<li className="main-aside-item-categories" key={title}>a
<li className="main-aside-item-categories" key={href}>