SuperAPI AI Directory

tanstack-router

Coding & development

View repository

Updated 10-15 21:41

About this skill

TanStack Router Reference

TanStack Router (@tanstack/react-router) distilled into a skill. Depending on the user's task, read the appropriate README.md and follow it to individual files.

Directory structure

skills/tanstack-router/
  SKILL.md
  references/
    getting-started/
      README.md
      overview.md
      quick-start.md
      devtools.md
      decisions-on-dx.md
      comparison.md
      faq.md
      installation-manual.md
      installation-with-vite.md
      installation-with-rspack.md
      installation-with-webpack.md
      installation-with-esbuild.md
      installation-with-router-cli.md
      migrate-from-react-router.md
      migrate-from-react-location.md
    core-routing/
      README.md
      routing-concepts.md
      route-trees.md
      route-matching.md
      file-based-routing.md
      virtual-file-routes.md
      code-based-routing.md
      file-naming-conventions.md
      url-rewrites.md
    navigation/
      README.md
      navigation.md
      links.md
      link-options.md
      custom-link.md
      path-params.md
      search-params.md
      custom-search-param-serialization.md
      route-masking.md
      navigation-blocking.md
      history-types.md
      scroll-restoration.md
      internationalization-i18n.md
    data-rendering/
      README.md
      data-loading.md
      deferred-data-loading.md
      external-data-loading.md
      data-mutations.md
      preloading.md
      document-head-management.md
      ssr.md
      render-optimizations.md
      code-splitting.md
      automatic-code-splitting.md
    configuration/
      README.md
      creating-a-router.md
      outlets.md
      router-events.md
      type-safety.md
      type-utilities.md
      router-context.md
      not-found-errors.md
      authenticated-routes.md
      static-route-data.md
    api/
      README.md
      create-router.md
      create-route.md
      create-file-route.md
      create-root-route.md
      create-root-route-with-context.md
      create-lazy-file-route.md
      lazy-route-component.md
      router-provider.md
      link.md
      outlet.md
      navigate.md
      use-router.md
      use-navigate.md
      use-params.md
      use-search.md
      use-loader-data.md
      use-loader-deps.md
      use-route-context.md
      use-match.md
      use-matches.md
      use-match-route.md
      use-router-state.md
      use-blocker.md
      use-location.md
      use-can-go-back.md
      redirect.md
      not-found.md
      router-options.md
      route-options.md
      router.md
      route-match.md
      parsed-location.md
      navigate-options.md
      link-options.md
      register.md
      error-component.md
      catch-boundary.md
      catch-not-found.md
      retain-search-params.md
      strip-search-params.md
      eslint-plugin-router.md
      create-route-property-order.md
      query.md
      defer.md
      await.md
      use-awaited.md
      get-route-api.md
      create-route-mask.md
      match-route.md
      client-only.md
      use-link-props.md
      use-child-matches.md
      use-parent-matches.md
      is-redirect.md
      is-not-found.md
  samples/
    README.md
    basic-file-routing.md
    code-based-routing.md
    search-params-validation.md
    path-params.md
    data-loading.md
    deferred-data.md
    auth-guard.md
    navigation-blocking.md
    query-integration.md
    code-splitting.md
    basic-ssr.md
    router-context.md
  scripts/
    README.md
    install.md
    scaffold.md
    bundler-plugins.md
    router-cli.md
    devtools.md
    eslint.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. For the relevant page, .md to check the details

Task → Category Mapping

Task Category Reference README
Introduction/installation (Vite/Rspack/Webpack/Esbuild/Router CLI), migration from React Router getting-started references/getting-started/README.md
Devtools, design philosophy (Decisions on DX), comparison with other libraries, FAQ getting-started references/getting-started/README.md
Basic concepts of file/code-based routing, route tree structure, matching rules core-routing references/core-routing/README.md
File naming conventions ($/_/(group) etc.), Virtual File Routes, URL Rewrites core-routing references/core-routing/README.md
Link / useNavigate / linkOptions / createLink navigation by navigation references/navigation/README.md
Type-safe validation of Path Params / Search Params, custom serialization navigation references/navigation/README.md
Route Masking, Navigation Blocking, History types, scroll restoration, i18n navigation references/navigation/README.md
loader / useLoaderData data loading, Deferred Data, external data integration data-rendering references/data-rendering/README.md
Preloading, Document Head management, SSR, rendering optimization, Code Splitting data-rendering references/data-rendering/README.md
createRouter initialization options, Router Events, type safety, Router Context configuration references/configuration/README.md
Not Found error handling,beforeLoad authentication guards, Static Route Data configuration references/configuration/README.md
Want to know the signatures of individual APIs (hooks, components, functions, types) accurately api references/api/README.md
defer / Await / useAwaited, ESLint plugin, TanStack Query integration API api references/api/README.md
Want to know implementation examples of typical usage (file routing, authentication guards, SSR, Query integration, etc.) samples samples/README.md
Want to know installation, scaffold, bundler plugin configuration, CLI, Devtools, ESLint commands scripts scripts/README.md