Pixi’VNNavigate/switch between UI screens
To navigate between different UI screens, it is necessary to use a routing system. A routing system allows you to define routes (or paths) for different screens and manage navigation between them.
TanStack Router
The main advantage of TanStack Router is its ability to automatically generate route handling using createFileRoute. With createFileRoute, you can define your routes simply by creating files in a specific folder structure. For example, if you create a file about.tsx in the src/routes folder, TanStack Router will automatically generate a route for /about that renders the component defined 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>
);
}How to navigate between screens/routes?
To navigate between screens/routes, use the navigation function provided by your routing system.
Templates
In all templates, the StepLabelProps interface is already extended to include a navigate function. You can find it in the pixi-vn.d.ts file.
ink
In all ink templates, a custom hashtag command has been introduced to navigate between routes. To do this, you need to use the following syntax:
# navigate [route]route: The destination route/path. For example,# navigate /new-route.
When you create a new label, you can use the navigate function to switch between routes:
export const startLabel = newLabel("start", [
({ navigate }) => {
navigate("/new-route");
},
]);