React Router – Route, Link, and NavLink

Introduction

After installing React Router, the next step is understanding its core building blocks: Route, Link, and NavLink. These components control how pages are displayed and how users navigate between them in a React application.

This topic explains what Route, Link, and NavLink are, how they work together, and when to use each one.

What is Route in React Router?

Route is used to map a URL path to a React component. When the browser URL matches the path defined in a Route, React Router renders the corresponding component.

Route does not navigate users. It only defines what should be shown for a specific URL.

Basic Example of Route

import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

export default App;

Explanation:

• path defines the URL
• element defines the component to render
• Routes acts as a container for all Route components

What is Link in React Router?

Link is used for navigation between routes without refreshing the page. It replaces traditional anchor tags in React applications.

Using <a href> causes a full page reload, while Link keeps navigation fast and smooth.

Example of Link

import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

export default Navbar;

Explanation:

• to defines the target path
• Navigation happens without page reload
• Browser history is maintained

What is NavLink in React Router?

NavLink is similar to Link but with extra features for active navigation styling.

NavLink automatically applies a style or class when the link matches the current URL. This is useful for menus and navigation bars.

Example of NavLink

import { NavLink } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <NavLink to="/" className={({ isActive }) => isActive ? "active" : ""}>
        Home
      </NavLink>
      <NavLink to="/about" className={({ isActive }) => isActive ? "active" : ""}>
        About
      </NavLink>
    </nav>
  );
}

export default Navbar;

Explanation:

• isActive helps detect the current route
• Active links can be styled easily
• Improves user experience

Difference Between Link and NavLink

How Route, Link, and NavLink Work Together

• Route decides which component to render
• Link allows navigation between routes
• NavLink enhances navigation with active state styling

Together, they form the foundation of React Router navigation.

Common Mistakes to Avoid

• Using <a href> instead of Link
• Forgetting to wrap the app with BrowserRouter
• Using old React Router v5 syntax
• Not using NavLink for navigation menus

Interview Questions and Answers – Route, Link, NavLink

1. What is Route in React Router?

Route maps a URL path to a React component and renders it when the path matches.

2. What is the difference between Route and Routes?

Route defines a single path, while Routes is a wrapper that manages multiple routes.

3. What is Link used for?

Link is used to navigate between pages without reloading the browser.

4. Why should we avoid anchor tags in React routing?

Anchor tags reload the page, while Link maintains SPA behavior.

5. What is NavLink?

NavLink is a special version of Link that supports active styling.

6. When should NavLink be used instead of Link?

NavLink should be used in navigation menus where active route indication is required.

7. How does NavLink know which route is active?

It compares the current URL with its path and sets an active state.

8. Can Route perform navigation?

No, Route only renders components. Navigation is handled by Link or NavLink.

9. Is NavLink slower than Link?

No, performance is nearly identical.

10. Are Route, Link, and NavLink available by default in React?

No, they come from the react-router-dom package.