Navigate/switch between UI screens

To switch between UI screens (without interrupting the canvas), you can use popups and modals, or navigate between different URL paths/routes.

What is the URL paths/routes? The URL paths/routes are the parts of the URL that come after the domain. For example, in the URL https://example.com/path/to/page, the route is /path/to/page. Typically, in all front-end (client) web projects, each route is linked to a web page (UI screen).

A routing system can be used to manage navigation between URL paths/routes. For example, you can use:

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

import { Route, Routes } from "react-router-dom";
import LoadingScreen from "./screens/LoadingScreen";
import MainMenu from "./screens/MainMenu";
import NarrationElement from "./screens/NarrationElement";

export default function AppRoutes() {
    return (
        <Routes>
            <Route key={"main_menu"} path={"/"} element={<MainMenu />} />
            <Route key={"loading"} path={"/loading"} element={<LoadingScreen />} />
            <Route key={"narration"} path={"/narration"} element={<NarrationElement />} />
            <Route path='*' element={<MainMenu />} />
        </Routes>
    );
}

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") 
        }, 
    ]
)