javascript 如何在ReactJs中突出显示活动(可变)链接？

lsmd5eda 于 2023-03-06 发布在 Java

关注(0)|答案(2)|浏览(115)

我知道如何在React.js中“突出显示”活动链接，我是这样做的：

<Link
  className={splitted[1] === 'Details'
    ? "bg-red-800 rounded-full hover:text-white"
    : "hover:bg-blue-800 rounded-full hover:text-white"
  }
  key={'xxx'}
  to={`/Details/${id}`}
>
  This is my link            
</Link>

(ok，也许有点矫枉过正，但它起作用了）
但是我在处理一堆通过Map呈现的链接时遇到了问题。我试着做同样的事情，但是根本不起作用。下面的代码出了什么问题？

const renderedLinks = links.map((link) => {
  return (
    <Link
      className={splitted[1] === `${link.path}`
        ? "bg-red-800 rounded-full hover:text-white"
        : "hover:bg-blue-800 rounded-full hover:text-white"
      }
      key={link.label}
      to={link.path}
    >
      {link.label}
    </Link>
  )
});

那么，如何将变量link.path放入其中呢？
链接由以下内容生成：

const links = [
  { label: 'Details', path: '/Details' },
  ...
]

splitted是由useLocation得到的pathname的第一条路径。
我使用的是react-router-dom@6。

JavaScript

来源：https://stackoverflow.com/questions/75633863/how-to-highlight-active-variable-link-in-reactjs

2条答案

按热度按时间

zf9nrax11#

最好使用NavLink组件而不是Link组件，因为它有内置逻辑来处理活动链接与当前URL路径的匹配。使用className回调来访问isActive属性并有条件地应用适当的CSS类。
示例：

<Link
  key={'xxx'}
  to={`/Details/${id}`}
  className={({ isActive }) => 
    [
      "rounded-full hover:text-white",
      isActive ? "bg-red-800" : "hover:bg-blue-800"
    ].join(" ")
  }
>
  This is my link            
</Link>

const renderedLinks = links.map((link) => (
  <Link
    key={link.path}
    to={link.path}
    className={({ isActive }) => 
      [
        "rounded-full hover:text-white",
        isActive ? "bg-red-800" : "hover:bg-blue-800"
      ].join(" ")
    }
  >
    {link.label}            
  </Link>
));

如果同时渲染到父路径和子/派生路径（即"/details"和"/details/specificDetails"）的链接，则还可以在NavLink上指定end属性，以便活动链接与路径的结尾匹配。
如果使用end属性，它将确保在匹配其子路径时，此组件不会匹配为"活动"。例如，要呈现仅在网站根目录而不是任何其他URL处活动的链接，您可以使用：

<NavLink to="/" end>
  Home
</NavLink>

应用于您的代码：

const renderedLinks = links.map((link) => (
  <Link
    key={link.path}
    to={link.path}
    className={({ isActive }) => 
      [
        "rounded-full hover:text-white",
        isActive ? "bg-red-800" : "hover:bg-blue-800"
      ].join(" ")
    }
    end // <--
  >
    {link.label}            
  </Link>
));

赞(0）回复(0）举报 2023-03-06

d5vmydt92#

您可以尝试使用NavLink而不是Link。NavLink特别用于了解任何链接的状态（活动或不活动）。您可以在https://reactrouter.com/en/main/components/nav-link中找到其文档

赞(0）回复(0）举报 2023-03-06