Concepts
Linking and Navigating
Navigation is react-router underneath, with file-based routing on top. Use its Link and useNavigate - client-side, no page reloads, lazy-loaded route segments.
Link
Use <Link to="/docs/...">Link</Link> for client-side navigation — no
page reloads, prefetched on hover, lazy segments.
import { Link } from "react-router";
<Link to="/about">About</Link>
<Link to="/blog/first-post">First post</Link>
Navigate
For imperative navigation after an action, use useNavigate(). It is
react-router's API, so anything you know carries over.
import { useNavigate } from "react-router";
function LoginForm() {
const navigate = useNavigate();
async function handleSubmit() {
await login(credentials);
navigate("/dashboard");
}
return <form onSubmit={handleSubmit}>...</form>;
}