Router

StateMesh ships a built-in router where routing IS state management. Every route transition is a transaction. Every loader is a resource. Every guard is middleware. No other React router reuses the state management primitives this way.

Import

import { defineRoutes, createRouter } from "statemesh-core/router";
import { RouterProvider, Outlet, Link } from "statemesh-core/router";

TIP

Router components (RouterProvider, Outlet, Link, SharedElement, useRouter) are imported from statemesh-core/router, not from statemesh-core.

Quick Example

import { defineRoutes, createRouter } from "statemesh-core/router";

const routes = defineRoutes([
  {
    path: "/",
    component: () => import("./pages/Home"),
    meta: { title: "Home" }
  },
  {
    path: "/products",
    component: () => import("./pages/Products"),
    loader: async ({ mesh }) => {
      return mesh.resource("products.list").fetch({ search: "" });
    },
    children: [
      {
        path: ":id",
        component: () => import("./pages/ProductDetail"),
        loader: async ({ params, mesh }) => {
          return mesh.resource("product.detail").fetch({ id: params.id });
        }
      }
    ]
  },
  {
    path: "*",
    component: () => import("./pages/NotFound")
  }
]);

const router = mesh.router(routes, {
  basename: "/app",
  scrollRestoration: true
});

import { RouterProvider, Outlet, Link } from "statemesh-core/router";

function App() {
  return (
    <StateMeshProvider mesh={mesh}>
      <RouterProvider router={router} mesh={mesh} routes={routes}>
        <Layout />
      </RouterProvider>
    </StateMeshProvider>
  );
}

function Layout() {
  return (
    <div>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/products">Products</Link>
      </nav>
      <Outlet />
    </div>
  );
}

What's Included

Feature	Description	Page
Routes	Route definitions, nested routes, lazy loading	Routes
Navigation	Link, useNavigate, useParams, useSearch	Navigation
Guards & Middleware	Route guards, middleware, redirect	Guards
Data Loading	Loaders, dependencies, error recovery, rollback	Data Loading
Advanced	Keep-alive, prefetch, shared elements, analytics	Advanced
SEO & Meta	Route metadata, document title, Open Graph	SEO