Navegar/cambiar entre pantallas de UI
Para navegar entre las diferentes pantallas de UI, es necesario utilizar un sistema de enrutamiento. Un sistema de enrutamiento le permite definir rutas (o caminos) para diferentes pantallas y gestionar la navegación entre ellas.
TanStack Router
La principal ventaja de TanStack Router es su capacidad de generar automáticamente la gestión de rutas mediante createFileRoute. Con createFileRoute, puede definir sus rutas simplemente creando archivos en una estructura de carpetas específica. Por ejemplo, si crea un archivo about.tsx en la carpeta src/routes, TanStack Router generará automáticamente una ruta para /about que renderiza el componente definido en 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>
);
}¿Cómo navegar entre pantallas/rutas?
Para navegar entre pantallas/rutas, utilice la función de navegación proporcionada por su sistema de enrutamiento.
Plantillas
En todas las plantillas, la interfaz StepLabelProps ya está extendida para incluir una función navigate. Puede encontrarla en el archivo pixi-vn.d.ts.
Pruebas
Si se usa el Game.testing del plugin de Vite.js (consulte la sección "Vite.js plugin" más arriba y la
Agent Skill pixi-vn-testing) para permitir que un agente de IA pruebe el juego automáticamente, llame también a
Game.testing.setProps
aquí, para que navigate (y cualquier otra cosa que devuelva este hook) permanezca disponible para una sesión de prueba:
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
En todas las plantillas de ink, se ha introducido un comando hashtag personalizado para navegar entre rutas. To do this, you need to use the following syntax:
# navigate [route]route: La ruta/camino de destino. Por ejemplo,# navigate /new-route.
Cuando cree una nueva label, puede utilizar la función navigate para cambiar entre rutas:
export const startLabel = newLabel("start", [
({ navigate }) => {
navigate("/new-route");
},
]);