React Router provides Link and NavLink components to handle navigation in Single Page Applications without refreshing the page.
Link replaces traditional anchor tagsNavLink detects active routes automaticallyUse to instead of href. React Router intercepts navigation and renders components dynamically.
// Basic navigation using Link component
import React from "react";
import { Link } from "react-router-dom";
function Navbar() {
return (
Home
About
Contact ); } export default Navbar;
// NavLink applies active class automatically
import React from "react";
import { NavLink } from "react-router-dom";
function Navbar() {
return (
); } export default Navbar;
// Function-based className for active links
isActive ? "active-link" : ""}
>
About
When the URL matches the route, NavLink applies the active class automatically using the isActive flag.
Link for simple navigationNavLink for menus and tabsNavLink