React Navigation with Link

In the last lesson, React Nested Routes, you built sections with shared layouts. This lesson shows you the Link component, React Router’s way to move between pages with a click and no reload.

🤔 Why not just use an anchor tag?

Here’s the pain. The plain HTML <a> tag does work, but it does the wrong thing for an SPA.

• A normal <a href="/about"> makes the browser ask the server for a whole new page.
• The screen goes blank and reloads, which is slow and feels clunky.
• It throws away your app’s current state and starts fresh every time.
• You lose the whole point of a single-page app, which is instant page changes.

So you need a way to change pages that updates the URL and swaps the component, without a reload. That’s exactly what Link is for.

🧩 The Link component

Link looks and feels like a normal link, but it navigates the React Router way. Instead of href, it uses a to prop.

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

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

Read the difference from a normal link.

• We import Link from react-router-dom.
• Instead of href, Link uses to for the path, like to="/about".
• Clicking it changes the URL and shows the matching route, with no page reload.
• To the user it looks exactly like a normal link, it’s just faster.

🔍 What Link does differently

It helps to see what Link actually does compared to <a>, so you trust why it’s faster.

• A plain <a> triggers a full request to the server and a fresh page load.
• Link stops that default behavior and tells React Router to handle it in the browser.
• React Router updates the URL and swaps to the matching component, keeping the app alive.
• The browser’s back and forward buttons still work, because React Router updates the history.

So Link gives you a real, clickable, shareable link, but it navigates instantly instead of reloading. Best of both.

🖥️ Link with dynamic paths

Link works great with the route parameters you learned. You build the to path with the value you want, like a user’s id.

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

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          <Link to={`/users/${user.id}`}>{user.name}</Link>
        </li>
      ))}
    </ul>
  );
}

See how the link is built.

• We map over users and make a Link for each one.
• The to uses a template string, `/users/${user.id}`, so each link points to that user.
• Clicking “Alex” might go to /users/1, which your :id route then handles.
• So the list of names becomes a list of links straight to each profile page.

So Link and route parameters work as a team: build the path with the id, and the parameter route reads it on the other side.

⚠️ Common Mistakes

The most common mistake is using a plain <a> tag instead of Link for internal pages, causing a full reload.

// ❌ a plain anchor reloads the whole page, losing SPA speed
<a href="/about">About</a>

// ✅ Link navigates with no reload
<Link to="/about">About</Link>

Keep these in mind.

• Don’t use <a> for pages inside your app. It reloads and kills the SPA feel. Use Link.
• Don’t write href on a Link. It uses to.
• Do use a normal <a> for external sites, like linking to another website. Link is only for routes inside your app.

✅ Best Practices

A few habits for navigation.

• Use Link for every internal page change, so navigation stays instant.
• Remember to for the path, not href.
• Build dynamic links with template strings, like to={`/users/${id}`}.
• Keep using a plain <a> only for external links that leave your app.

🧩 What You’ve Learned

• ✅ A plain <a> reloads the whole page, which throws away the speed of a single-page app
• ✅ Link from React Router changes pages with no reload, keeping the app fast
• ✅ Link uses the to prop for the path, not href
• ✅ It updates the URL and shows the matching route, and the back/forward buttons still work
• ✅ Build dynamic links with template strings, like to={`/users/${id}`}
• ✅ Use Link for internal pages, but a normal <a> for external websites

🚀 What’s Next?

Now your users can click to move between pages instantly. But there’s a nicer link for navigation menus, one that knows which page is active and can highlight itself. Next you’ll learn NavLink.

React Navigation with NavLink