React JS 中的 NavLink 无法按预期工作？

Question

所以，我正在使用 ReactJS。在侧边栏中）使用了 NavLink，但是当我使用嵌套路由时，它没有按预期工作。

<li>
     <NavLink
            role="button"
            to="/organization/"
            className="flex flex-row justify-start gap-2 items-center"
          >
            <MdDashboard /> Dashboard
          </NavLink>
        </li>
        <li>
          <NavLink
            role="button"
            to="/organization/customization"
            className="flex flex-row justify-start gap-2 items-center"
          >
            <MdOutlineDeveloperMode /> Customization
          </NavLink>
        </li>

嵌套路由 =

http://localhost:3000/organization/customization

它为

/organization

和

/organization/customization

添加了活动课程

我想确保嵌套路由可以与 NavLink 配合使用。

Answer 1

因此，您需要添加“结束属性”，例如：

 <NavLink
      end
      role="button"
      to="/organization/"
      className="flex flex-row justify-start gap-2 items-center"
    >
      <MdDashboard /> Dashboard
    </NavLink>