在 UI 屏幕之间导航/切换
要在不同的 UI 屏幕之间导航，需要使用路由系统。路由系统允许你为不同的屏幕定义路由（或路径），并管理它们之间的导航。
TanStack Router
TanStack Router 的主要优势在于它能够使用 createFileRoute 自动生成路由处理。使用 createFileRoute，你只需在特定的文件夹结构中创建文件即可定义路由。例如，如果你在 src/routes 文件夹中创建一个 about.tsx 文件，TanStack Router 将自动生成一个 /about 路由，用于渲染 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>
);
}如何在屏幕/路由之间导航？
要在屏幕/路由之间导航，请使用路由系统提供的导航函数。
模板
在所有模板中，StepLabelProps 接口已经过扩展，包含了一个 navigate 函数。您可以在 pixi-vn.d.ts 文件中找到它。
测试
如果使用了 Vite.js 插件的 Game.testing（参见上文的“Vite.js 插件”部分以及 pixi-vn-testing
Agent Skill）来让 AI 智能体对游戏进行测试，也请在此处调用
Game.testing.setProps
，这样 navigate（以及此 hook 返回的其他内容）在测试会话中也能保持可用：
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
在所有 ink 模板中，引入了一个 自定义井号命令，用于在路由之间导航。 To do this, you need to use the following syntax:
# navigate [route]route：目标路由/路径。例如：# navigate /new-route。
创建新的叙事节点时，你可以使用 navigate 函数在路由之间切换：
export const startLabel = newLabel("start", [
({ navigate }) => {
navigate("/new-route");
},
]);