bionicjs
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.

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>

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>;
}