background colour for active link in ReactJS-CodePudding

I have been working on styling part for my React application sidebar.

What I have is a list of items and each will route to a different page.

So, now I want to check on which route I'm on by having the link active but I had a problem and can find solution.

Can you help me put with this. I have given my code below. I want to have the background color for the link I'm active on.

CODE:

Dashboard.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>

Dashboard.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;
}

CodePudding user response：

Try setting "activeStyle" attribute to link elements like this:

<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>

CodePudding user response：

A quick and easy solution would be styling the link directly from your react file rather than from your css file like so:

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

For more information on react links and overall styling in React view this article https://www.codegrepper.com/code-examples/javascript/react link remove underline and change color

CodePudding user response：

       <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>

CodePudding user response：

If activeStyle doesn't work for You, I think that's because You must be in react-router-dom V6.

In V6 I use a little tip :

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>
    )

}

So, as You can see, I use pathname to get location. And in className I use a ternary function to apply active class or not. If You also use a class for each Link, you could do :

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

In this case Your Link will have "menu_item" as class and if it's active "menu_item active".

In the documentation, they use a different way, but I think it's more simple like that.

Edit: I forgot to point out that in Your css You must use "ul a.active" instead of "ul a:active"