react-router-v7

React Router v7 Framework Mode Reference

A skill covering the complete API documentation of React Router v7 Framework Mode. Depending on the user's task, read the appropriate README.md and follow it to the individual files.

Directory Structure

skills/react-router-v7/
  SKILL.md
  references/
    start/
      README.md
      actions.md
      data-loading.md
      deploying.md
      installation.md
      navigating.md
      pending-ui.md
      rendering.md
      route-module.md
      routing.md
      testing.md
    conventions/
      README.md
      client-modules.md
      entry-client-tsx.md
      entry-server-tsx.md
      react-router-config-ts.md
      root-tsx.md
      routes-ts.md
      server-modules.md
    routers/
      README.md
      HydratedRouter.md
      ServerRouter.md
    hooks/
      README.md
      useLoaderData.md
      useActionData.md
      useNavigation.md
      useNavigate.md
      useFetcher.md
      useFetchers.md
      useParams.md
      useRouteLoaderData.md
      useMatches.md
      useLocation.md
      useSubmit.md
      useRouteError.md
      useRevalidator.md
      useSearchParams.md
      useHref.md
      useBlocker.md
      useBeforeUnload.md
      useAsyncValue.md
      useAsyncError.md
      useOutletContext.md
      useViewTransitionState.md
      useFormAction.md
      useMatch.md
    components/
      README.md
      Await.md
      Form.md
      Link.md
      Links.md
      Meta.md
      Navigate.md
      NavLink.md
      Outlet.md
      PrefetchPageLinks.md
      ScrollRestoration.md
      Scripts.md
    utils/
      README.md
      createContext.md
      createCookie.md
      createCookieSessionStorage.md
      createMemorySessionStorage.md
      createRoutesStub.md
      data.md
      generatePath.md
      href.md
      isRouteErrorResponse.md
      redirect.md
      redirectDocument.md
      replace.md
      sessions-and-cookies.md
    how-to/
      README.md
      accessibility.md
      client-data.md
      error-boundary.md
      error-reporting.md
      fetchers.md
      file-route-conventions.md
      file-uploads.md
      form-validation.md
      headers.md
      instrumentation.md
      middleware.md
      navigation-blocking.md
      pre-rendering.md
      presets.md
      react-server-components.md
      resource-routes.md
      route-module-type-safety.md
      security.md
      server-bundles.md
      spa.md
      status.md
      suspense.md
      using-handle.md
      view-transitions.md
    explanation/
      README.md
      backend-for-frontend.md
      code-splitting.md
      concurrency.md
      form-vs-fetcher.md
      hot-module-replacement.md
      index-query-param.md
      lazy-route-discovery.md
      progressive-enhancement.md
      race-conditions.md
      react-transitions.md
      state-management.md
      type-safety.md
    cli/
      README.md
      dev.md
  samples/
    README.md
    basic-routing.md
    data-loading.md
    error-boundary.md
    form-action.md
    form-validation.md
    middleware-auth.md
    navigation-blocking.md
    pending-ui.md
    pre-rendering.md
    search-params.md
    session-auth.md
  scripts/
    README.md
    build.md
    cli.md
    install.md
    typegen.md

Exploration Procedure

Derive the category from the task, and identify the target page in the category's README.md:

1. Find the category corresponding to the task in the mapping table below
2. That category's references/{category}/README.md to identify the target page
3. Read the .md of that page to check the details

Task → Category Mapping

Task	Category	Reference README
Project setup and installation	start	references/start/README.md
Routing configuration, data loading, actions, deployment	start	references/start/README.md
Route modules, rendering strategies, testing	start	references/start/README.md
Configuration of root.tsx / routes.ts / react-router.config.ts	conventions	references/conventions/README.md
entry.client.tsx / entry.server.tsx / client・server module separation	conventions	references/conventions/README.md
How to use HydratedRouter / ServerRouter	routers	references/routers/README.md
Hooks such as useLoaderData / useActionData / useFetcher	hooks	references/hooks/README.md
useNavigate / useNavigation / useParams / useSearchParams, etc.	hooks	references/hooks/README.md
useBlocker / useRevalidator / useRouteError, etc.	hooks	references/hooks/README.md
Components such as Form / Link / NavLink / Outlet / Await	components	references/components/README.md
Links / Meta / Scripts / ScrollRestoration / PrefetchPageLinks	components	references/components/README.md
redirect / data / createCookie / session management	utils	references/utils/README.md
generatePath / href / isRouteErrorResponse / createRoutesStub	utils	references/utils/README.md
Middleware, file uploads, SPA mode, prerendering	how-to	references/how-to/README.md
Form validation, error boundaries, security	how-to	references/how-to/README.md
RSC, server bundles, resource routes, type safety	how-to	references/how-to/README.md
Concepts such as code splitting, state management, BFF, progressive enhancement	explanation	references/explanation/README.md
Mechanisms of HMR, race conditions, concurrency, type safety	explanation	references/explanation/README.md
CLI commands such as dev / build / typegen	cli	references/cli/README.md
I want to check typical usage and implementation patterns	samples	samples/README.md
I want to know the commands for installation, build, and type generation	scripts	scripts/README.md