Naviguer/basculer entre les écrans UI
Pour naviguer entre différents écrans UI, il est nécessaire d'utiliser un système de routage. Un système de routage vous permet de définir des routes (ou chemins) pour différents écrans et de gérer la navigation entre eux.
TanStack Router
Le principal avantage de TanStack Router est sa capacité à générer automatiquement la gestion des routes à l'aide de createFileRoute. Avec createFileRoute, vous pouvez définir vos routes simplement en créant des fichiers dans une structure de dossiers spécifique. Par exemple, si vous créez un fichier about.tsx dans le dossier src/routes, TanStack Router générera automatiquement une route pour /about qui affiche le composant défini dans about.tsx.
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/about")({
component: About,
});
function About() {
return (
<main className="page-wrap px-4 py-12">
<section className="island-shell rounded-2xl p-6 sm:p-8">
<p className="island-kicker mb-2">About</p>
<h1 className="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
A small starter with room to grow.
</h1>
<p className="m-0 max-w-3xl text-base leading-8 text-[var(--sea-ink-soft)]">
TanStack Start gives you type-safe routing, server functions, and modern SSR defaults. Use this as a
clean foundation, then layer in your own routes, styling, and add-ons.
</p>
</section>
</main>
);
}Comment naviguer entre les écrans/routes ?
Pour naviguer entre les écrans/routes, utilisez la fonction de navigation fournie par votre système de routage.
Modèles
Dans tous les modèles, l'interface StepLabelProps est déjà étendue pour inclure une fonction navigate. Vous pouvez la trouver dans le fichier pixi-vn.d.ts.
Test
Si le Game.testing du plugin Vite.js (voir la section « Vite.js plugin » ci-dessus et l'Agent Skill
pixi-vn-testing) est utilisé pour permettre à un agent IA de tester le jeu, appelez
Game.testing.setProps
ici aussi, afin que navigate (et tout ce que renvoie ce hook) reste disponible pour une session de test :
import { Game, StepLabelProps } from "@drincs/pixi-vn";
import useMyNavigate from "./useMyNavigate";
export default function useGameProps(): StepLabelProps {
const navigate = useMyNavigate();
const props = {
navigate,
};
Game.testing.setProps(props);
return props;
}ink
Dans tous les modèles ink, une commande hashtag personnalisée a été introduite pour naviguer entre les routes. To do this, you need to use the following syntax:
# navigate [route]route: la route/le chemin de destination. Par exemple,# navigate /new-route.
Lorsque vous créez un nouveau label, vous pouvez utiliser la fonction navigate pour basculer entre les routes :
export const startLabel = newLabel("start", [
({ navigate }) => {
navigate("/new-route");
},
]);