Navigate/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. There are several routing systems available, including:

• TanStack Router
• React Router
• Vue Router
• Angular Router

TanStack Router

TanStack Router is a routing system for web applications that allows you to manage navigation between different pages or components in a simple and efficient way. It is designed to be flexible and easy to use, offering advanced features such as support for dynamic parameters, router state management, and integration with rendering libraries like React, Vue, and Angular.

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 routes?

To navigate between routes, use the navigation function provided by your routing system.

In pixi-vn projects, it's very common to need to navigate between routes while narrating. To enable this, the navigation function must be included in the StepLabelProps interface.

import { narration } from '@drincs/pixi-vn'

declare module '@drincs/pixi-vn' {
    interface StepLabelProps {
        navigate: (route: string) => void,
    }
}

# navigate [route]

So, when you create a new label, you can use the navigate function to switch between routes:

export const startLabel = newLabel("start_label",
    [
        ({ navigate }) => { 
            navigate("/new-route") 
        }, 
    ]
)