Episode 23 of 32

Router Links

Use Link components instead of anchor tags for client-side navigation.

Regular <a> tags cause full page reloads. Use <Link> for client-side navigation.

Using Link

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

const Navbar = () => {
  return (
    <nav>
      <h1>My Blog</h1>
      <div>
        <Link to="/">Home</Link>
        <Link to="/create">New Blog</Link>
      </div>
    </nav>
  );
};

Link vs Anchor Tag

<a href> — Full page reload, loses state
<Link to> — Client-side navigation, keeps state, instant