React Cheatsheet 10 — React Router and TanStack Router

npm i react-router

import { BrowserRouter, Routes, Route, Link, useParams } from "react-router";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/users/1">User 1</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users/:id" element={<User />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

function User() {
  const { id } = useParams();
  return <p>User {id}</p>;
}

<Route path="/users" element={<UsersLayout />}>
  <Route index element={<UsersList />} />
  <Route path=":id" element={<UserDetail />} />
</Route>

import { useNavigate } from "react-router";

const nav = useNavigate();
nav("/users/1");
nav(-1);              // back
nav("/x", { replace: true });

import { useSearchParams } from "react-router";

const [params, setParams] = useSearchParams();
const q = params.get("q");
setParams({ q: "hello" });

import { createBrowserRouter, RouterProvider } from "react-router";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    loader: async () => fetchSession(),
    children: [
      {
        path: "users/:id",
        element: <User />,
        loader: async ({ params }) => fetchUser(params.id),
      },
    ],
  },
]);

<RouterProvider router={router} />

// In component:
const user = useLoaderData<typeof loader>();

{
  path: "users/:id",
  element: <UserEdit />,
  action: async ({ request, params }) => {
    const form = await request.formData();
    await updateUser(params.id, form);
    return redirect(`/users/${params.id}`);
  },
}

// Component:
<Form method="post">
  <input name="name" />
  <button>Save</button>
</Form>

npm i @tanstack/react-router

import { Router, Route, RootRoute, Link } from "@tanstack/react-router";

const root = new RootRoute({ component: () => <Outlet /> });
const home = new Route({ getParentRoute: () => root, path: "/", component: Home });
const user = new Route({
  getParentRoute: () => root,
  path: "users/$id",
  loader: ({ params }) => fetchUser(params.id),
  component: User,
});

const tree = root.addChildren([home, user]);
const router = new Router({ routeTree: tree });

// In User component:
const { id } = userRoute.useParams();
const data = userRoute.useLoaderData();

npm i @tanstack/router-plugin

src/routes/
├── __root.tsx
├── index.tsx
├── users.tsx              # /users
└── users.$id.tsx          # /users/:id

const route = new Route({
  validateSearch: z.object({ q: z.string().optional() }),
});

const { q } = route.useSearch();

<Link to="/users/$id" params={{ id: "1" }} preload="intent">
  User 1
</Link>

import { Outlet } from "react-router";    // or tanstack

function Layout() {
  return (
    <div>
      <Sidebar />
      <main><Outlet /></main>
    </div>
  );
}

{
  path: "settings",
  lazy: async () => {
    const m = await import("./Settings");
    return { Component: m.default };
  },
}

import { NavLink } from "react-router";

<NavLink to="/" className={({ isActive }) => isActive ? "current" : ""}>
  Home
</NavLink>

function RequireAuth({ children }: { children: React.ReactNode }) {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" />;
  return <>{children}</>;
}

<Route path="/dashboard" element={
  <RequireAuth><Dashboard /></RequireAuth>
} />

{
  path: "dashboard",
  loader: async () => {
    const user = await getUser();
    if (!user) throw redirect("/login");
    return user;
  },
}