Навигация/переключение между экранами UI

Для навигации между различными экранами UI необходимо использовать систему маршрутизации. Система маршрутизации позволяет определять маршруты (или пути) для разных экранов и управлять навигацией между ними.

TanStack RouterКопировать ссылку на якорь

Главное преимущество TanStack Router — это его способность автоматически генерировать обработку маршрутов с помощью createFileRoute. С помощью createFileRoute вы можете определять свои маршруты, просто создавая файлы в определённой структуре папок. Например, если вы создадите файл about.tsx в папке src/routes, TanStack Router автоматически сгенерирует маршрут для /about, который отображает компонент, определённый в 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>
    );
}

Как переключаться между экранами/маршрутами?Копировать ссылку на якорь

Чтобы переключаться между экранами/маршрутами, используйте функцию навигации, предоставляемую вашей системой маршрутизации.

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]

Когда вы создаёте новый нарративный узел, вы можете использовать функцию navigate, чтобы переключаться между маршрутами:

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

Другие возможностиКопировать ссылку на якорь