router-core-navigation

Link component, useNavigate, Navigate component, router.navigate, ToOptions/NavigateOptions/LinkOptions, from/to relative navigation, activeOptions/activeProps, preloading (intent/viewport/render), preloadDelay, navigation blocking (useBlocker, Block), createLink, linkOptions helper, scroll restoration, MatchRoute.

Aller à l'installation

Dépôt: mehdibha/dotUI
Dernière activité de la source: 3 août 2026 à 13:37
Langue détectée de SKILL.md: anglais
Étoiles: 1 354
Forks: 34

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.

npx skills add https://github.com/mehdibha/dotUI --skill router-core-navigation

La commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.

Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

SKILL.md

Instructions source · Aperçu en lecture seule

Retour à la recherche Retour à l’installation

devtools-app-setup

Install TanStack Devtools, pick framework adapter (React/Vue/Solid/Preact), register plugins via plugins prop, configure shell (position, hotkeys, theme, hideUntilHover, requireUrlFlag, eventBusConfig). TanStackDevtools component, defaultOpen, localStorage persistence.

2026-08-03

devtools-vite-plugin

Configure @tanstack/devtools-vite for source inspection (data-tsd-source, inspectHotkey, ignore patterns), console piping (client-to-server, server-to-client, levels), enhanced logging, server event bus (port, host, HTTPS), production stripping (removeDevtoolsOnBuild), editor integration (launch-editor, custom editor.open). Must be FIRST plugin in Vite config. Vite ^6 || ^7 only.

2026-08-03

react-start

React bindings for TanStack Start: createStart, StartClient, StartServer, React-specific imports, re-exports from @tanstack/react-router, full project setup with React, useServerFn hook.

2026-08-03

Tout voir dans ce dépôt

import { Link } from "@tanstack/react-router"

function PostLink({ postId }: { postId: string }) {
  return (
    <Link to="/posts/$postId" params={{ postId }}>
      View Post
    </Link>
  )
}

import { Link } from "@tanstack/react-router"

function NavLink() {
  return (
    <Link
      to="/posts"
      activeProps={{ className: "font-bold" }}
      inactiveProps={{ className: "text-gray-500" }}
      activeOptions={{ exact: true }}
    >
      Posts
    </Link>
  )
}

<Link to="/posts">
  {({ isActive }) => <span className={isActive ? "font-bold" : ""}>Posts</span>}
</Link>

import { createFileRoute, Link } from "@tanstack/react-router"

export const Route = createFileRoute("/posts/$postId")({
  component: PostComponent,
})

function PostComponent() {
  return (
    <div>
      {/* Relative to current route */}
      <Link from={Route.fullPath} to="..">
        Back to Posts
      </Link>

      {/* "." reloads the current route */}
      <Link from={Route.fullPath} to=".">
        Reload
      </Link>
    </div>
  )
}

import { useNavigate } from "@tanstack/react-router"

function CreatePostForm() {
  const navigate = useNavigate({ from: "/posts" })

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    const response = await fetch("/api/posts", { method: "POST", body: "..." })
    const { id: postId } = await response.json()

    if (response.ok) {
      navigate({ to: "/posts/$postId", params: { postId } })
    }
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>
}

import { Navigate } from "@tanstack/react-router"

function LegacyRedirect() {
  return <Navigate to="/posts/$postId" params={{ postId: "my-first-post" }} />
}

import { createRouter } from "@tanstack/react-router"

const router = createRouter({
  routeTree,
  defaultPreload: "intent",
  defaultPreloadDelay: 50, // ms, default is 50
})

<Link
  to="/posts/$postId"
  params={{ postId }}
  preload="intent"
  preloadDelay={100}
>
  View Post
</Link>

import { useRouter } from "@tanstack/react-router"

function Component() {
  const router = useRouter()

  useEffect(() => {
    router.preloadRoute({ to: "/posts/$postId", params: { postId: "1" } })
  }, [router])

  return <div />
}

import { useBlocker } from "@tanstack/react-router"
import { useState } from "react"

function EditForm() {
  const [formIsDirty, setFormIsDirty] = useState(false)

  useBlocker({
    shouldBlockFn: () => {
      if (!formIsDirty) return false
      const shouldLeave = confirm("Are you sure you want to leave?")
      return !shouldLeave
    },
  })

  return <form>{/* ... */}</form>
}

import { useBlocker } from "@tanstack/react-router"
import { useState } from "react"

function EditForm() {
  const [formIsDirty, setFormIsDirty] = useState(false)

  const { proceed, reset, status } = useBlocker({
    shouldBlockFn: () => formIsDirty,
    withResolver: true,
  })

  return (
    <>
      <form>{/* ... */}</form>
      {status === "blocked" && (
        <div>
          <p>Are you sure you want to leave?</p>
          <button onClick={proceed}>Yes</button>
          <button onClick={reset}>No</button>
        </div>
      )}
    </>
  )
}

useBlocker({
  shouldBlockFn: () => formIsDirty,
  enableBeforeUnload: formIsDirty,
})

import {
  linkOptions,
  Link,
  useNavigate,
  redirect,
} from "@tanstack/react-router"

const dashboardLinkOptions = linkOptions({
  to: "/dashboard",
  search: { search: "" },
})

// Use anywhere: Link, navigate, redirect
function Nav() {
  const navigate = useNavigate()

  return (
    <div>
      <Link {...dashboardLinkOptions}>Dashboard</Link>
      <button onClick={() => navigate(dashboardLinkOptions)}>Go</button>
    </div>
  )
}

// Also works in an array for navigation bars
const navOptions = linkOptions([
  { to: "/dashboard", label: "Summary", activeOptions: { exact: true } },
  { to: "/dashboard/invoices", label: "Invoices" },
  { to: "/dashboard/users", label: "Users" },
])

function NavBar() {
  return (
    <nav>
      {navOptions.map((option) => (
        <Link
          {...option}
          key={option.to}
          activeProps={{ className: "font-bold" }}
        >
          {option.label}
        </Link>
      ))}
    </nav>
  )
}

import * as React from "react"
import { createLink, LinkComponent } from "@tanstack/react-router"

interface BasicLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {}

const BasicLinkComponent = React.forwardRef<HTMLAnchorElement, BasicLinkProps>(
  (props, ref) => {
    return <a ref={ref} {...props} className="block px-3 py-2 text-blue-700" />
  },
)

const CreatedLinkComponent = createLink(BasicLinkComponent)

export const CustomLink: LinkComponent<typeof BasicLinkComponent> = (props) => {
  return <CreatedLinkComponent preload="intent" {...props} />
}

<CustomLink to="/dashboard/invoices/$invoiceId" params={{ invoiceId: 0 }} />

const router = createRouter({
  routeTree,
  scrollRestoration: true,
})

const router = createRouter({
  routeTree,
  scrollRestoration: true,
  scrollToTopSelectors: ["#main-scrollable-area"],
})

const router = createRouter({
  routeTree,
  scrollRestoration: true,
  getScrollRestorationKey: (location) => location.pathname,
})

<Link to="/posts" resetScroll={false}>
  Posts
</Link>

import { Link, MatchRoute } from "@tanstack/react-router"

function Nav() {
  return (
    <Link to="/users">
      Users
      <MatchRoute to="/users" pending>
        <Spinner />
      </MatchRoute>
    </Link>
  )
}

// WRONG — breaks type safety and param encoding
<Link to={`/posts/${postId}`}>Post</Link>

// CORRECT — use the params option
<Link to="/posts/$postId" params={{ postId }}>Post</Link>

// WRONG — no href, no cmd+click, no preloading, no accessibility
function BadNav() {
  const navigate = useNavigate()
  return <button onClick={() => navigate({ to: "/posts" })}>Posts</button>
}

// CORRECT — real <a> tag with href, accessible, preloadable
function GoodNav() {
  return <Link to="/posts">Posts</Link>
}

// WRONG — without from, ".." resolves from root
<Link to="..">Back</Link>

// CORRECT — provide from for relative resolution
<Link from={Route.fullPath} to="..">Back</Link>

// WRONG — replaces ALL search params with just { page: 2 }
<Link to="." search={{ page: 2 }}>Page 2</Link>

// CORRECT — preserves existing search params, updates page
<Link to="." search={(prev) => ({ ...prev, page: 2 })}>Page 2</Link>

name	router-core/navigation
description	Link component, useNavigate, Navigate component, router.navigate, ToOptions/NavigateOptions/LinkOptions, from/to relative navigation, activeOptions/activeProps, preloading (intent/viewport/render), preloadDelay, navigation blocking (useBlocker, Block), createLink, linkOptions helper, scroll restoration, MatchRoute.
type	sub-skill
library	tanstack-router
library_version	1.166.2
requires	["router-core"]
sources	["TanStack/router:docs/router/guide/navigation.md","TanStack/router:docs/router/guide/preloading.md","TanStack/router:docs/router/guide/navigation-blocking.md","TanStack/router:docs/router/guide/link-options.md","TanStack/router:docs/router/guide/custom-link.md","TanStack/router:docs/router/guide/scroll-restoration.md"]

name	router-core/navigation
description	Link component, useNavigate, Navigate component, router.navigate, ToOptions/NavigateOptions/LinkOptions, from/to relative navigation, activeOptions/activeProps, preloading (intent/viewport/render), preloadDelay, navigation blocking (useBlocker, Block), createLink, linkOptions helper, scroll restoration, MatchRoute.
type	sub-skill
library	tanstack-router
library_version	1.166.2
requires	["router-core"]
sources	["TanStack/router:docs/router/guide/navigation.md","TanStack/router:docs/router/guide/preloading.md","TanStack/router:docs/router/guide/navigation-blocking.md","TanStack/router:docs/router/guide/link-options.md","TanStack/router:docs/router/guide/custom-link.md","TanStack/router:docs/router/guide/scroll-restoration.md"]

router-core-navigation

Options d'installation

Vérifiez les fichiers source

Navigation

Setup

Navigation

Setup

Core Patterns

Link with Active States

Relative Navigation with `from`

useNavigate for Programmatic Navigation

Preloading

Navigation Blocking

linkOptions for Reusable Navigation Options

createLink for Custom Components

Scroll Restoration

MatchRoute for Pending UI

Common Mistakes

CRITICAL: Interpolating params into the `to` string

MEDIUM: Using useNavigate for clickable elements

HIGH: Not providing `from` for relative navigation

HIGH: Using search as object instead of function loses existing params

Cross-References

router-core-navigation

Informations de source

Options d'installation

Vérifiez les fichiers source

Plus depuis ce dépôt

Navigation

Setup

Plus depuis ce dépôt

Navigation

Setup

Core Patterns

Link with Active States

Relative Navigation with from

useNavigate for Programmatic Navigation

Preloading

Navigation Blocking

linkOptions for Reusable Navigation Options

createLink for Custom Components

Scroll Restoration

MatchRoute for Pending UI

Common Mistakes

CRITICAL: Interpolating params into the to string

MEDIUM: Using useNavigate for clickable elements

HIGH: Not providing from for relative navigation

HIGH: Using search as object instead of function loses existing params

Cross-References

Relative Navigation with `from`

CRITICAL: Interpolating params into the `to` string

HIGH: Not providing `from` for relative navigation