TanStack Router: type-safe routing for React and Solid
Routage par fichiers ou par code avec search params de première classe, chargement de données, code splitting et intégration TypeScript profonde — fondation de TanStack Start
- Quoi
- Routage par fichiers ou par code avec search params de première classe, chargement de données, code splitting et intégration TypeScript profonde — fondation de TanStack Start
- Coût
- Gratuit
- Prérequis
- un projet React ou Solid (paquets npm @tanstack/react-router, plus @tanstack/router-plugin pour le routage par fichiers Vite/Rspack/Webpack ou @tanstack/router-cli) ; TypeScript recommandé pour les bénéfices type-safe ; aucun compte ni clé requis
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — un skill de référence TanStack Router de la collection communautaire `tanstack-skills/tanstack-skills` : routage entièrement type-safe pour React et Solid avec routage par fichiers (conventions de nommage pour index, params dynamiques `$postId`, routes pathless `_layout`, catch-alls splat, groupes de routes), arbres de routes par code en alternative, gestion des search params de première classe avec validation, parsing/stringify des params par route, chargement de données intégré, code splitting, et intégration TypeScript profonde — la fondation de routage de TanStack Start. Couvre l'installation (`@tanstack/react-router`, `@tanstack/router-plugin` pour Vite/Rspack/Webpack ou `@tanstack/router-cli`), les devtools, et les patterns de configuration de routes. Crédit : @tanstack-skills. Bémols honnêtes : collection communautaire — pas la doc officielle de TanStack ; suppose une familiarité avec React/TypeScript ; licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet React ou Solid (paquets npm @tanstack/react-router, plus @tanstack/router-plugin pour le routage par fichiers Vite/Rspack/Webpack ou @tanstack/router-cli) ; TypeScript recommandé pour les bénéfices type-safe ; aucun compte ni clé requis Installe-moi « TanStack Router : routage type-safe pour React et Solid ». Il donne à l'agent la référence communautaire tanstack-skills pour TanStack Router : routage par fichiers avec conventions de nommage, arbres de routes par code, search params de première classe avec validation, parsing des params par route, chargement de données intégré, code splitting, devtools, et intégration TypeScript profonde (fondation de routage de TanStack Start). Licence MIT. Dépôt : https://github.com/tanstack-skills/tanstack-skills/blob/main/plugins/tanstack-router/skills/tanstack-router/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « tanstack-router ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. installer les paquets @tanstack/react-router dans le projet ; choisir le routage par fichiers avec le plugin Vite ou un arbre de routes par code). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.