UI画面の移動/切り替え
異なるUI画面間を移動するには、ルーティングシステムを使用する必要があります。ルーティングシステムを使用すると、さまざまな画面のルート（またはパス）を定義し、それらの間のナビゲーションを管理できます。
TanStack Router
TanStack Routerの主な利点は、createFileRouteを使用してルート処理を自動生成できることです。 createFileRouteを使用すると、特定のフォルダ構造でファイルを作成するだけでルートを定義できます。例えば、src/routesフォルダにabout.tsxファイルを作成すると、TanStack Routerはabout.tsxで定義されたコンポーネントをレンダリングする/aboutのルートを自動的に生成します。
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（およびこのフックが返すその他の値）をテストセッションでも利用できるようにしてください。
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。
新しいナラティブノード（label）を作成する際は、navigate関数を使用してルートを切り替えることができます。
export const startLabel = newLabel("start", [
({ navigate }) => {
navigate("/new-route");
},
]);