navlink react router

Strange Squirrel answered on February 25, 2022 Popularity 10/10 Helpfulness 6/10

answer navlink react router

navlink react router

Comment

import * as React from "react";
import { NavLink } from "react-router-dom";

function NavList() {
  // This styling will be applied to a <NavLink> when the
  // route that it links to is currently selected.
  let activeStyle = {
    textDecoration: "underline",
  };

  let activeClassName = "underline";

  return (
    <nav>
      <ul>
        <li>
          <NavLink
            to="messages"
            style={({ isActive }) =>
              isActive ? activeStyle : undefined
            }
          >
            Messages
          </NavLink>
        </li>
        <li>
          <NavLink
            to="tasks"
            className={({ isActive }) =>
              isActive ? activeClassName : undefined
            }
          >
            Tasks
          </NavLink>
        </li>
        <li>
          <NavLink to="tasks">
            {({ isActive }) => (
              <span
                className={
                  isActive ? activeClassName : undefined
                }
              >
                Tasks
              </span>
            )}
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

Popularity 10/10 Helpfulness 6/10 Language javascript

Source: reactrouter.com

Tags: javascript react-router

Link to this answer
Share Copy Link

Contributed on Aug 12 2022

Strange Squirrel

0 Answers Avg Quality 2/10

Closely Related Answers

navlink and link react router

Comment

What is the difference between the NavLink and Link?

The NavLink is used when you want to highlight a link as active. 
So, on every routing to a page, the link is highlighted according 
to the activeClassName. 
Link is for links that need no highlighting. And a is for external links.

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 22 2023

Cybersmith

0 Answers Avg Quality 2/10

Navlink in react router dom

Comment

// Navbar.js
import React from "react";
// import { Link } from "react-router-dom";
import { NavLink } from "react-router-dom";
const Navbar = () => {
  const navLinkStyles = ({ isActive }) => {
    return {
      fontWeight: isActive ? "bold" : "normal",
      textDecoration: isActive ? "none" : "underline"
    };
  };
  return (
    <nav className="primary-nav">
      {/* <Link to="/">Home</Link> */}
      {/* <Link to="/about">About</Link> */}
      <NavLink style={navLinkStyles} to="/">
        Home
      </NavLink>
      <NavLink style={navLinkStyles} to="/about">
        About
      </NavLink>
    </nav>
  );
};
export default Navbar;

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: dev.to

Tags: dom

Link to this answer
Share Copy Link

Contributed on May 16 2023

Imran Khan

0 Answers Avg Quality 2/10

link and navlink in react

Comment

What is the difference between NavLink and Link ?
the Link component is used to navigate the different routes on the site.
But NavLink is used to add the style attributes to the active routes.

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Feb 25 2022

Cautious Cod

0 Answers Avg Quality 2/10

navlink react router

Contents

More Related Answers