Navigare/cambiare tra le schermate UI
Per navigare tra diverse schermate UI, è necessario utilizzare un sistema di routing. Un sistema di routing consente di definire route (o percorsi) per le diverse schermate e gestire la navigazione tra di esse.
TanStack Router
Il principale vantaggio di TanStack Router è la sua capacità di generare automaticamente la gestione delle route utilizzando createFileRoute. Con createFileRoute, puoi definire le tue route semplicemente creando file in una struttura di cartelle specifica. Ad esempio, se crei un file about.tsx nella cartella src/routes, TanStack Router genererà automaticamente una route per /about che esegue il rendering del componente definito in 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>
);
}Come navigare tra schermate/route?
Per navigare tra schermate/route, utilizza la funzione di navigazione fornita dal tuo sistema di routing.
Modelli
In tutti i template, l'interfaccia StepLabelProps è già estesa per includere una funzione navigate. Puoi trovarla nel file pixi-vn.d.ts.
Test
Se il Game.testing del plugin Vite.js (vedi la sezione "Vite.js plugin" sopra e l'
Agent Skill pixi-vn-testing) viene usato per far testare il gioco a un agente IA, chiama
Game.testing.setProps
anche qui, così che navigate (e qualsiasi altra cosa restituita da questo hook) rimanga disponibile per una sessione di 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
In tutti i template ink, è stato introdotto un comando hashtag personalizzato per navigare tra le route. To do this, you need to use the following syntax:
# navigate [route]route: la route/percorso di destinazione. Ad esempio,# navigate /new-route.
Quando crei una nuova label, puoi usare la funzione navigate per passare tra le route:
export const startLabel = newLabel("start", [
({ navigate }) => {
navigate("/new-route");
},
]);