adding class active to other parent html tag with react router

user_2982234 0
Viewed 689

I have been stuck for hours to figure out how to add classActive on the parent html tag of the provided reactrouter tag. Here is the code, Using React-Router "version": "3.2.6"

    <li className="sidebar-item">
        <div className="sidebar-link" activeClassName="active">
            <span>Track Page</span>

            <div className="collapse first-level">
                <Link className="first-level__link" to="/track-page" activeClassName="active">
                    Track Page 1
                </Link>

                <Link className="first-level__link" to="/track-page-2" activeClassName="active">
                    Track Page 2
                </Link>
            </div>

        </div>
    </li>

Currently the active class can only be kept on <link> tag but I need it to be on the <li> the parent of the <link>. How can I achieve this ? Please help.

I am not very familiar with react so, any help here would be much appreciated. Thank you in advance.

react-router reactjs
4 Answers

Use <NavLink> instead of <Link> and add exact as a property

Include exact as a property to ensure activeClassName only triggers on url paths that match your location exactly

if you want add active class to li tag also which is the parent

you can use a function to get the NavLinkClass you can use the useLocation to get the exact location

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

const location = useLocation();

 const getNavLinkClass = path => {
    return location.pathname === path
    ? "sidebar-item active"
    : "sidebar-item";
     };

 <li className={getNavLinkClass("/track-page")>
      <div className="sidebar-link">
        <span>Track Page</span>

        <div className="collapse first-level">
          <NavLink
            className="first-level__link"
            to="/track-page"
            activeClassName="active"
          >
            Track Page 1
          </NavLink>

          <NavLink
            className="first-level__link"
            to="/track-page-2"
            activeClassName="active"
          >
            Track Page 2
          </NavLink>
        </div>
      </div>
    </li>
user_101705810

Try by adding style to anchor element like below.

<Link  to="/track-page" >
                   <a className="first-level__link_active"> Track Page 1 </a>
</Link>

<Link  to="/track-page-2" activeClassName="active">
                   <a className="first-level__link_active">Track Page 2 </a>
</Link>
user_95106160

Using this.props.location.pathname you get the current page url. so you can set the condition when page url match you give the active class anywhere you want.

Try this code may be it's help you

render() {
  const url = this.props.location.pathname + this.props.location.search;

  <li className="sidebar-item">
    <div className="sidebar-link">
      <span>Track Page</span>
      <div className="collapse first-level">
        <div className={url == '/track-page' ? 'active' : ''}>
          <Link className="first-level__link" to="/track-page" activeClassName="active">
            Track Page 1
          </Link>
        </div>
        <div className={url == '/track-page-2' ? 'active' : ''}>
          <Link className="first-level__link" to="/track-page-2" activeClassName="active">
            Track Page 2
          </Link>
        </div>
      </div>
    </div>
  </li>
}
user_102730130

here is the demo code sandbox : https://codesandbox.io/s/black-platform-gz5qx?file=/src/App.js

you can use window.location.pathname to get the current route. you might want to use something like the following sample code.

export default function App() {
  const location = window.location.pathname;

  return (
    <div className="outer">
      <h1>Hello CodeSandbox</h1>
      <a
        href="/track-page"
        className={`link ${location === "/track-page" ? "active" : ""}`}
      >
        /track-page
      </a>
      <a
        href="/track-page-2"
        className={`link ${location === "/track-page-2" ? "active" : ""}`}
      >
        /track-page-2
      </a>
      <a
        href="/track-page-3"
        className={`link ${location === "/track-page-3" ? "active" : ""}`}
      >
        /track-page-3
      </a>
      
    </div>
  );
}
user_77843540
Related