Navigation using Link and NavLink

In React Router, navigation between different components or pages can be done using the Link and NavLink components. These components help in navigating without reloading the page, enabling client-side routing, which is a key feature of Single Page Applications (SPAs).

1. Link Component

The Link component is used to create hyperlinks to different routes in your application. It works similarly to traditional anchor tags (<a>), but without causing the page to reload.

Basic Example of Link Component

import React from 'react';
import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/home">Home</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </nav>

        <Routes>
          <Route path="/home" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

In this example:

• The Link component is used to navigate between the Home and About pages.
• Using to="/home" or to="/about", users are directed to the respective route without causing a page reload.

2. NavLink Component

The NavLink component is similar to Link, but it provides additional functionality for styling the active link. The NavLink component adds an active class to the currently active route, which allows for styling the link differently when it is selected.

Basic Example of NavLink Component

import React from 'react';
import { BrowserRouter as Router, NavLink, Route, Routes } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><NavLink to="/home" activeClassName="active-link">Home</NavLink></li>
            <li><NavLink to="/about" activeClassName="active-link">About</NavLink></li>
          </ul>
        </nav>

        <Routes>
          <Route path="/home" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

In this example:

• The NavLink component is used in the same way as the Link component.
• The activeClassName="active-link" is used to add a CSS class (active-link) to the link when it matches the current route.

Active Link Styling

.active-link {
  font-weight: bold;
  color: blue;
}

This CSS will style the active link, making it bold and blue, helping users easily identify the currently active page.

3. Customizing Active Links

In React Router v6, the activeClassName and activeStyle props are removed, and the active styling is achieved using the isActive function or style prop.

Example: Active Link Styling with React Router v6

import React from 'react';
import { BrowserRouter as Router, NavLink, Route, Routes } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <NavLink
                to="/home"
                style={({ isActive }) => ({
                  fontWeight: isActive ? 'bold' : 'normal',
                  color: isActive ? 'blue' : 'black',
                })}
              >
                Home
              </NavLink>
            </li>
            <li>
              <NavLink
                to="/about"
                style={({ isActive }) => ({
                  fontWeight: isActive ? 'bold' : 'normal',
                  color: isActive ? 'blue' : 'black',
                })}
              >
                About
              </NavLink>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/home" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

In this example:

• The style prop is used with a function that checks if the link is active using isActive. The styling of the link changes based on whether it is active or not.
• When the user is on the /home route, the Home link becomes bold and blue, and similarly for the About link when the user is on /about.

4. Using NavLink for Nested Routes

You can use NavLink to navigate within nested routes. This is especially useful when working with layouts where you have links that highlight the active section within the layout.

Example: Nested Routes with NavLink

import React from 'react';
import { BrowserRouter as Router, NavLink, Route, Routes } from 'react-router-dom';

function Dashboard() {
  return <h2>Dashboard Page</h2>;
}

function Settings() {
  return <h2>Settings Page</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <NavLink
                to="/dashboard"
                style={({ isActive }) => ({
                  fontWeight: isActive ? 'bold' : 'normal',
                  color: isActive ? 'blue' : 'black',
                })}
              >
                Dashboard
              </NavLink>
            </li>
            <li>
              <NavLink
                to="/settings"
                style={({ isActive }) => ({
                  fontWeight: isActive ? 'bold' : 'normal',
                  color: isActive ? 'blue' : 'black',
                })}
              >
                Settings
              </NavLink>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/settings" element={<Settings />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

In this example:

• The NavLink components are used for navigation within the Dashboard and Settings routes.
• Active links are highlighted by applying a bold and blue style when the route is active.