CodeBlanks Logo Icon CodeBlanks
Login Register

Link and NavLink

Learn to change pages with Link and track active state with NavLink.

Link and NavLink

<Link to="..."> is React Router's basic navigation component. On click, it changes the URL; no page reload.

<NavLink to="..."> is a special variant of Link. When on the active route, it adds the active class to className. This is ideal for highlighting the active item in a menu.

Both take the to prop. Link for plain navigation, NavLink for active highlighting. NavLink is preferred in menus where you want styling.

Menu example

For a navigation menu, NavLink is ideal. <nav><NavLink to="/">Home</NavLink><NavLink to="/about">About</NavLink></nav>.

On the active route, NavLink automatically gets class="active". With CSS .active { '{ font-weight: bold; }' }, the active item appears bold.

This pattern is one of the cleanest ways to show users which page they're on. You get an accessible menu without code clutter.

Practice Write menu

Complete the skeleton. Write a NavBar component. Inside <nav>, have two NavLinks: <NavLink to="/">Home</NavLink> and <NavLink to="/about">About</NavLink>. Export it. (Assume NavLink is imported.)

Starter code

App.jsx
// Write the NavBar component here

Sample solution

App.jsx
function NavBar() {
  return (
    <nav>
      <NavLink to="/">Home</NavLink>
      <NavLink to="/about">About</NavLink>
    </nav>
  );
}

export default NavBar;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 Which adds a class on the active route?

  • Route
  • Link
  • BrowserRouter
  • NavLink Correct answer

Explanation: NavLink adds a class on active route.

2 Link prop

Question 
Link and NavLink's common prop is ____.
Answer 
Link and NavLink's common prop is to.

Explanation: Common prop is 'to'.

3 Match Link and NavLink

Term Meaning
Link plain
NavLink active highlight
to prop
.active CSS

All lessons in Intermediate

1 Custom hook basics

  1. What is a custom hook?
  2. useToggle
  3. usePrevious
  4. Summary - Custom hook basics

2 Advanced custom hooks

  1. useLocalStorage
  2. useFetch
  3. useDebounce
  4. Summary - Advanced custom hooks

3 Context deep dive

  1. Context separation
  2. Context + useReducer
  3. Default value and error
  4. Summary - Context deep dive

4 useReducer pattern

  1. The reducer pattern
  2. Action types
  3. Composition
  4. Summary - useReducer pattern

5 Cart management

  1. Project: Cart management
  2. Cart reducer
  3. Cart context
  4. Add product UI

6 useMemo

  1. What is useMemo?
  2. Dependency control
  3. Pitfalls
  4. Summary - useMemo

7 useCallback

  1. What is useCallback?
  2. Sibling re-render
  3. useMemo vs useCallback
  4. Summary - useCallback

8 React.memo

  1. What is React.memo?
  2. Prop comparison
  3. Custom comparator
  4. Summary - React.memo

9 Performance project

  1. Project: Performance
  2. Expensive computation
  3. Stable handler
  4. Memoized list

10 Router basics

  1. What is React Router?
  2. Defining routes
  3. Link and NavLink
  4. Summary - Router basics

11 Advanced router

  1. URL parameters
  2. Nested routes
  3. Programmatic navigation
  4. Summary - Advanced router

12 Multi-page app

  1. Project: Multi-page app
  2. Layout and router
  3. List and detail
  4. Navigation and 404

13 Layout components

  1. The layout pattern
  2. Sidebar and header
  3. Layout with Outlet
  4. Summary - Layout components

14 Error boundary

  1. What is an error boundary?
  2. Class component structure
  3. Fallback UI
  4. Summary - Error boundary

15 Suspense and lazy

  1. What is React.lazy?
  2. Suspense boundary
  3. Multiple boundaries
  4. Summary - Suspense and lazy

16 Portals

  1. What is a portal?
  2. Modal example
  3. Event bubbling
  4. Summary - Portal

17 Advanced useRef

  1. useRef and computation
  2. Measuring
  3. forwardRef
  4. Summary - Advanced useRef

18 RTL tests

  1. React Testing Library
  2. render and screen
  3. Firing events
  4. Summary - RTL tests

19 Dashboard project

  1. Project: Dashboard
  2. Layout and route
  3. Stats widget
  4. Add via modal

20 Intermediate final

  1. Challenge: useFetch hook
  2. Challenge: Theme provider
  3. Challenge: Memoized list
  4. Challenge: Routed cart