如何在路由NextJs中呈现正确的组件

Question

我有一个问题，当我改变路线。在书页之间，它使我感觉很好。但是，当我需要一个动态的路线，它不呈现我。在routes中，我有uw文件夹和[table].js

当我把手动路由uw/first放到我想去uw/second时，第一个渲染得很好，然后第二个坚持第一个的样式它不能为我提供正确的数据

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',
},
];

然后返回路由

<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

您使用标题作为map内部的键，因为uw/primera和uw/segunda之间的标题是相同的，它不会更新组件。

将关键字更改为href可以解决这个问题。

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

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