Foundations

Routing

The shell, breadcrumbs, the command palette and the app switcher link and navigate. They ask a router adapter how, so they work with any router.

The package needs three things from a router, and you hand them over once, near the root:

Link, a component that renders a link from href;
usePathname, a hook that returns the current path (the shell marks the active module and screen with it);
useNavigate, a hook that returns a function to go somewhere (⌘K, the app switcher, keyboard shortcuts).

With no adapter, the package uses plain <a> links, window.location and full page loads: correct everywhere, just not instant.

Next.js#

Ready-made, in its own entry so that only Next.js apps load Next.js code.

tsx

// app/providers.tsx ("use client")
import { NextRouterProvider } from "@waveinno/ui/next";

<NextRouterProvider>{children}</NextRouterProvider>

React Router (Vite)#

src/ui-router.tsx

import { Link, useLocation, useNavigate } from "react-router";

import { RouterProvider, type RouterAdapter } from "@waveinno/ui";

const reactRouter: RouterAdapter = {
  Link: ({ href, ...props }) => <Link to={href} {...props} />,
  usePathname: () => useLocation().pathname,
  useNavigate: () => {
    const navigate = useNavigate();
    return (href) => navigate(href);
  },
};

<RouterProvider adapter={reactRouter}>{children}</RouterProvider>

In your own components#

The same adapter is yours to use, so a component written once runs in both kinds of app.

tsx

import { RouterLink, useRouterAdapter } from "@waveinno/ui";

// A link through whichever router the app uses.
<RouterLink href="/sessions" className="text-primary">Sessions</RouterLink>

// The path and a navigate function, the same in Next.js and Vite.
const { pathname, navigate } = useRouterAdapter();