Navigare/passare da una schermata all'altra dell'UI

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>
    );
}

Come navigare tra le route?

Per navigare tra i percorsi, utilizza la funzione di navigazione fornita dal sistema di routing.

Nei progetti pixi-vn è molto comune dover navigare tra i percorsi durante la narrazione. Per abilitare questa funzione, la funzione di navigazione deve essere inclusa nell'interfaccia StepLabelProps.

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

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

# navigate [route]

Quindi, quando si crea una nuova etichetta, è possibile utilizzare la funzione navigate per passare da un percorso all'altro:

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