navlink react active class

Muhammad Umer answered on December 14, 2021 Popularity 1/10 Helpfulness 1/10

answer navlink react active class

related react-router-dom navlink active

navlink react active class

Comment

<div>
      Screen1
      <div>
        <NavLink
          to="/other"
          exact
          className={({ isActive }) => (isActive ? "selected" : "normal")}
        >
          other
        </NavLink>
      </div>
      <Outlet></Outlet>
    </div>

//css 
.normal {
  border: 2px solid green;
}
.selected {
  border: 2px solid yellow;
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: class javascript

Link to this answer
Share Copy Link

Contributed on May 21 2022

Muhammad Umer

0 Answers Avg Quality 2/10

Closely Related Answers

react-router-dom navlink active

Comment

<NavLink
  to="users"
  className={({ isActive }) => (isActive ? 'active' : 'inactive')}
>
  Users
</NavLink>

Popularity 10/10 Helpfulness 8/10 Language javascript

Source: ultimatecourses.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 31 2022

Confused Capybara

0 Answers Avg Quality 2/10

react-active link

Comment

<NavLink
  to="/faq"
  style={isActive => ({
    color: isActive ? "green" : "blue"
  })}
>
  FAQs
</NavLink>

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: v5.reactrouter.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Feb 01 2022

Crowded Capuchin

0 Answers Avg Quality 2/10

react router active link css

Comment

<NavLink
          key={tab.id}
          className={(navData) =>
            navData.isActive ? styles.activeTab : styles.inactiveTab
          }
          to={tab.path}
        >
          {tab.name}
        
</NavLink>

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Dec 14 2021

Tanishq Vyas

0 Answers Avg Quality 2/10

navlink react active class

Contents

More Related Answers