Breaking News: Grepper is joining You.com. Read the official announcement!

navlink

Relieved Rattlesnake answered on March 20, 2020 Popularity 10/10 Helpfulness 3/10

answer navlink

related NavLink

navlink

Comment

<NavLink to="/about">About</NavLink>

Popularity 10/10 Helpfulness 3/10 Language html

Source: github.com

Tags: html

Link to this answer
Share Copy Link

Contributed on Mar 20 2020

Relieved Rattlesnake

0 Answers Avg Quality 2/10

Closely Related Answers

NavLink

Comment

// React Router v6
import { NavLink } from 'react-router-dom';

function NavBar() {
  // inline or css classes
  let activeStyle = { color: 'green', textDecoration: 'underline' };
  let activeClass = 'activated';

  return (
    <nav>
      <ul>
        <li>
          <NavLink
            to='messages'
            style={({ isActive }) => isActive ? activeStyle : undefined}>
            Messages
          </NavLink>
        </li>
        <li>
          <NavLink
            to='tasks'
            className={({ isActive }) => isActive ? activeClass : undefined}>
            Tasks
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}
// Special kind of <Link> that knows when it is 'active'
// the styling applies to a <NavLink> when route it links to
// is currently selected.
/* 
 index.css
 	a, .nav-link { color: 'blue', text-decoration: 'none' }
    .activated { color: 'green', text-decoration: 'underline' }
*/

// React Router v5
function NavBar() {  
  return (
    <nav>
      <ul>
        <li>
          <NavLink
            to='/messages'
            style={{ color: 'blue', textDecoration: 'none' }}
    		activeStyle={{ color: 'green', textDecoration: 'underline' }}>
            Messages
          </NavLink>
        </li>
        <li>
          <NavLink
            to='tasks'
            className='nav-link'
			activeClassName='activated'>
            Tasks
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: reactrouter.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 17 2022

Coffee Addict

0 Answers Avg Quality 2/10

NavLink

Comment

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

Popularity 9/10 Helpfulness 2/10 Language html

Source: reactrouter.com

Tags: html

Link to this answer
Share Copy Link

Contributed on May 10 2021

Stupid Sloth

0 Answers Avg Quality 2/10

navlink

Contents

More Related Answers

navlink

Closely Related Answers

NavLink

NavLink

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.