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

navlink react router

Strange Squirrel answered on February 25, 2022 Popularity 10/10 Helpfulness 5/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 5/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

navlink react router

Closely Related Answers

navlink and link react router

Navlink in react router dom

link and navlink in react

Grepper

Documentation

Social

Legal

Contact

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