ReactJS 中活动链接的背景颜色

Question

我一直在为我的 React 应用程序侧边栏设计样式部分。

我拥有的是一个项目列表，每个项目都会路由到不同的页面。

所以，现在我想通过激活链接来检查我所在的路线，但我遇到了问题并且可以找到解决方案。

你能帮我解决这个问题吗？我在下面给出了我的代码。我想要为我活动的链接设置背景颜色。

代码：

仪表板.js

            <div>
             <ul>
              <Link to="/homepage">Dashboard</Link>
              <Link to="/customers">Customers</Link>
              <Link to="/products">Products</Link>
              <Link to="/orders">Orders</Link>
              <Link to="/analytics">Analytics</Link>
              <Link to="/categories">Categories</Link>
              <Link to="/discount">Discount</Link>
              <Link to="/inventory">Inventory</Link>
              <Link to="/settings">Settings</Link>
             </ul>
            </div>

仪表板.css

ul{
    width: 200px;
    height: 100vh;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

ul a {
    display: flex;
    padding: 10px;
    font-size: 20px;
    text-decoration: none;
    color: black;
}

ul a:active {
    background-color: #349eff;
}

ul a:hover{
    background-color: #349eff;
    color: white;
    border-radius: 15px;
    margin-right: 30px;
    width: 150px;
}

Answer 1

如果 activeStyle 不适合你，我想那是因为你必须使用react-router-dom V6。

在V6中我使用了一个小技巧：

const Menu = () => {
    const {pathname} = useLocation();

    return (
        <ul>
            <ul>
              <Link className={(pathname === '/homepage') ? 'active' : ''} to="/homepage">Dashboard</Link>
              <Link className={(pathname === '/customers') ? 'active' : ''} to="/customers">Customers</Link>
              <Link className={(pathname === '/products') ? 'active' : ''} to="/products">Products</Link>
              <Link className={(pathname === '/orders') ? 'active' : ''} to="/orders">Orders</Link>
              <Link className={(pathname === '/analytics') ? 'active' : ''} to="/analytics">Analytics</Link>
              <Link className={(pathname === '/categories') ? 'active' : ''} to="/categories">Categories</Link>
              <Link className={(pathname === '/discount') ? 'active' : ''} to="/discount">Discount</Link>
              <Link className={(pathname === '/inventory') ? 'active' : ''} to="/inventory">Inventory</Link>
              <Link className={(pathname === '/settings') ? 'active' : ''} to="/settings">Settings</Link>
             </ul>
        </ul>
    )

}

因此，如您所见，我使用路径名来获取位置。在 className 中，我使用三元函数来应用或不应用活动类。 如果您还为每个链接使用一个类，您可以这样做：

className={`menu_item ${(pathname === '/') ? 'active' : ''}`}

在这种情况下，您的链接将以“menu_item”作为类，如果它处于活动状态，则为“menu_item active”。

在文档中，他们使用了不同的方式，但我认为这样更简单。

编辑：我忘了指出，在你的CSS中你必须使用“ul a.active”而不是“ul a:active”

Answer 2

尝试设置“activeStyle”属性来链接元素，如下所示：

<div>
 <ul>
  <Link activeStyle={{ backgroundColor: #349eff; }} to="/homepage">Dashboard</Link>
  <Link activeStyle={{ backgroundColor: #349eff; }} to="/customers">Customers</Link>
  <Link activeStyle={{ backgroundColor: #349eff; }} to="/products">Products</Link>
  <Link activeStyle={{ backgroundColor: #349eff; }} to="/orders">Orders</Link>
  <Link activeStyle={{ backgroundColor: #349eff; }} to="/analytics">Analytics</Link>
  <Link activeStyle={{ backgroundColor: #349eff; }} to="/categories">Categories</Link>
  <Link activeStyle={{ backgroundColor: #349eff; }} to="/discount">Discount</Link>
  <Link activeStyle={{ backgroundColor: #349eff; }} to="/inventory">Inventory</Link>
  <Link activeStyle={{ backgroundColor: #349eff; }} to="/settings">Settings</Link>
 </ul>
</div>

Answer 3

一个快速简单的解决方案是直接从您的 React 文件而不是像这样从 css 文件设置链接样式：

<Link to="first" style={{ textDecoration: 'none' }}>
  <MenuItem style={{ paddingLeft: 13 }}>Team 1</MenuItem>
</Link>

有关React链接和React中整体样式的更多信息，请查看本文https://www.codegrepper.com/code-examples/javascript/react+link+remove+underline+and+change+color

Answer 4

我没有使用 activeStyle，而是使用了

activeClassName="active-link"

，现在我可以使用 css 文件中的

className="active-link"

来设置它的样式，并且它有效。

如果上述解决方案在我的情况下不起作用，希望这可能会有所帮助。

Answer 5

您需要使用NavLink。像这样导入：

import { NavLink } from "react-router-dom";

然后，您可以使用NavLink中的activeStyle来设置活动链接样式！

<NavLink className={({ isActive }) => (isActive ? "link-active" : "none")} to='/'> Text </NavLink>

“link-active” 是一个可以放置样式（使用 CSS）的类，“none” 是一个可以在链接处于非活动状态时设置样式的类。

Answer 6

       <div>
         <ul>
          <Link activeStyle={{ backgroundColor: 
           window.location.href.includes('homepage') ? "#349eff" :"" }} 
           to="/homepage">Dashboard</Link>
          <Link activeStyle={{ backgroundColor: 
           window.location.href.includes('customers') ? "#349eff" :"" }}  
            to="/customers">Customers</Link>
          <Link  activeStyle={{ backgroundColor: 
           window.location.href.includes('products') ? "#349eff" :"" }}  
            to="/products">Products</Link>
         </ul>
        </div>