Zwischen UI-Bildschirmen navigieren/wechseln

Um zwischen verschiedenen UI-Bildschirmen zu navigieren, ist es notwendig, ein Routing-System zu verwenden. Ein Routing-System ermöglicht es Ihnen, Routen (oder Pfade) für verschiedene Bildschirme zu definieren und die Navigation zwischen ihnen zu verwalten.

TanStack Router

Der Hauptvorteil von TanStack Router ist seine Fähigkeit, die Routenverwaltung automatisch mit createFileRoute zu generieren. Mit createFileRoute können Sie Ihre Routen einfach definieren, indem Sie Dateien in einer bestimmten Ordnerstruktur erstellen. Wenn Sie beispielsweise eine Datei about.tsx im Ordner src/routes erstellen, generiert TanStack Router automatisch eine Route für /about, die die in about.tsx definierte Komponente rendert.

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

Wie navigiert man zwischen Bildschirmen/Routen?

Um zwischen Bildschirmen/Routen zu navigieren, verwenden Sie die von Ihrem Routing-System bereitgestellte Navigationsfunktion.

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

# navigate [route]

Wenn Sie ein neues Label erstellen, können Sie die navigate-Funktion verwenden, um zwischen Routen zu wechseln:

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

Weitere Funktionen