createStaticRouter (dev branch) | React Router

dev

Branches

latest (7.12.0)dev

Versions

7.12.0 6.30.3 v4/5.x v3.x

createStaticRouter

Getting Started

Framework Mode

Installation Routing Route Module Rendering Strategies Data Loading Actions Navigating Pending UI Testing Deploying

Data Mode

Installation Routing Route Object Data Loading Actions Navigating Pending UI Custom Framework Testing

Declarative Mode

Installation Routing Navigating URL Values

Upgrading

Future Flags Upgrading from v6 Upgrading from Remix Framework Adoption from Component Routes Framework Adoption from RouterProvider

API

Components

Await Form Link Links Meta NavLink Navigate Outlet PrefetchPageLinks Route Routes Scripts ScrollRestoration

Hooks

useActionData useAsyncError useAsyncValue useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useInRouterContext useLinkClickHandler useLoaderData useLocation useMatch useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams usePrompt🧪useResolvedPath useRevalidator useRouteError useRouteLoaderData useRoutes useSearchParams useSubmit useViewTransitionState

Framework Conventions

root.tsx routes.ts react-router.config.ts entry.client.tsx entry.server.tsx .client modules .server modules

Framework Routers

HydratedRouter ServerRouter

Data Routers

RouterProvider StaticRouterProvider createBrowserRouter createHashRouter createMemoryRouter createStaticHandler createStaticRouter

Declarative Routers

BrowserRouter HashRouter HistoryRouter🧪MemoryRouter Router StaticRouter

RSC (Unstable)

RSCHydratedRouter🧪RSCStaticRouter🧪createCallServer🧪getRSCStream🧪matchRSCServerRequest🧪routeRSCServerRequest🧪

Utils

IsCookieFunction IsSessionFunction RouterContextProvider createContext createCookie createCookieSessionStorage createMemorySessionStorage createPath createRoutesFromElements createRoutesStub createSearchParams data generatePath href isCookie isRouteErrorResponse isSession matchPath matchRoutes parsePath redirect redirectDocument renderMatches replace resolvePath

Other API

@react-router/{adapter}@react-router/dev (CLI)@react-router/serve

Tutorials

Quick Start Address Book

How-Tos

Accessibility Client Data Data Strategy Error Boundaries Error Reporting Using Fetchers File Route Conventions File Uploads Form Validation HTTP Headers Instrumentation🧪Middleware Navigation Blocking Pre-Rendering Presets React Server Components🧪Resource Routes Route Module Type Safety Security Server Bundles Single Page App (SPA)Status Codes Streaming with Suspense Using handle View Transitions

Explanations

Backend For Frontend Automatic Code Splitting Network Concurrency Management Form vs. fetcher Hot Module Replacement Index Query Param Lazy Route Discovery Progressive Enhancement Race Conditions React Transitions🧪Sessions and Cookies State Management Type Safety

Community

API Development Strategy Contributing

Getting Started

Framework Mode

Installation Routing Route Module Rendering Strategies Data Loading Actions Navigating Pending UI Testing Deploying

Data Mode

Installation Routing Route Object Data Loading Actions Navigating Pending UI Custom Framework Testing

Declarative Mode

Installation Routing Navigating URL Values

Upgrading

Future Flags Upgrading from v6 Upgrading from Remix Framework Adoption from Component Routes Framework Adoption from RouterProvider

API

Components

Await Form Link Links Meta NavLink Navigate Outlet PrefetchPageLinks Route Routes Scripts ScrollRestoration

Hooks

useActionData useAsyncError useAsyncValue useBeforeUnload useBlocker useFetcher useFetchers useFormAction useHref useInRouterContext useLinkClickHandler useLoaderData useLocation useMatch useMatches useNavigate useNavigation useNavigationType useOutlet useOutletContext useParams usePrompt🧪useResolvedPath useRevalidator useRouteError useRouteLoaderData useRoutes useSearchParams useSubmit useViewTransitionState

Framework Conventions

root.tsx routes.ts react-router.config.ts entry.client.tsx entry.server.tsx .client modules .server modules

Framework Routers

HydratedRouter ServerRouter

Data Routers

RouterProvider StaticRouterProvider createBrowserRouter createHashRouter createMemoryRouter createStaticHandler createStaticRouter

Declarative Routers

BrowserRouter HashRouter HistoryRouter🧪MemoryRouter Router StaticRouter

RSC (Unstable)

RSCHydratedRouter🧪RSCStaticRouter🧪createCallServer🧪getRSCStream🧪matchRSCServerRequest🧪routeRSCServerRequest🧪

Utils

IsCookieFunction IsSessionFunction RouterContextProvider createContext createCookie createCookieSessionStorage createMemorySessionStorage createPath createRoutesFromElements createRoutesStub createSearchParams data generatePath href isCookie isRouteErrorResponse isSession matchPath matchRoutes parsePath redirect redirectDocument renderMatches replace resolvePath

Other API

@react-router/{adapter}@react-router/dev (CLI)@react-router/serve

Tutorials

Quick Start Address Book

How-Tos

Accessibility Client Data Data Strategy Error Boundaries Error Reporting Using Fetchers File Route Conventions File Uploads Form Validation HTTP Headers Instrumentation🧪Middleware Navigation Blocking Pre-Rendering Presets React Server Components🧪Resource Routes Route Module Type Safety Security Server Bundles Single Page App (SPA)Status Codes Streaming with Suspense Using handle View Transitions

Explanations

Backend For Frontend Automatic Code Splitting Network Concurrency Management Form vs. fetcher