javascript 如何为活动NavLink react-router-dom v6应用正确的类名？

yftpprvb 于 2023-05-05 发布在 Java

关注(0)|答案(1)|浏览(275)

我尝试样式我的活动导航链接，但我不能这样做，链接总是有类"flights-table-daylink active-Btn"。
这是我的代码，我在Good Guy的教程中看到了这一点，但在我的项目中这不起作用。
codesandbox.io/s/style-navllink-sksgrg?file=/src/App.js

const setActive = ({ isActive }) =>
  isActive ? "flights-table-daylink active-Btn" : "flights-table-daylink";

<NavLink to="/departure" className={setActive}>
  <span>1</span>
</NavLink>

JavaScript

来源：https://stackoverflow.com/questions/76130319/how-to-apply-correct-classname-for-active-navlink-react-router-dom-v6

1条答案

按热度按时间

mctunoxg1#

如果您没有为React Router中的NavLink****组件提供toprop**，则无法判断当前路由是否与链路的目的地匹配。className属性已设置为**setActive函数，该函数将根据**isActive属性返回不同的类名。
当您向NavLink提供toprop时，React Router会将当前URL与to*prop中指定的目标URL进行比较。如果当前URL与NavLink的to属性匹配，则isActive属性将为true，active-Btn类将应用于NavLink。否则，isActive属性为false，只应用flights-table-daylink类。

const setActive = ({ isActive }) =>
  isActive ? "flights-table-daylink active-Btn" : "flights-table-daylink";

 <NavLink to={"/"} className={setActive}>
   <span>1</span>
 </NavLink>

现在一切都将完全按照您的预期进行。

赞(0）回复(0）举报 2023-05-05

我来回答

javascript 如何为活动NavLink react-router-dom v6应用正确的类名？

1条答案

相关问题

热门标签

最新问答