Documentation
Router

Router

Router is used to navigate between pages and manage page history.

import { useRouter } from "narraleaf-react";
const router = useRouter();

Public Methods

push

Push a new page id to the router history and navigate to it.

router.push("about");

The Game will navigate to the page with the id about. If there are any pages in the forward history, they will be cleared.

<Page id="about">
    {/* These elements will be displayed */}
    {/* Your content */}
</Page>
  • id: string - The id of the page to navigate to
  • Returns this

back

Navigate to the previous page in the router history.

This method will do nothing if there is no previous page.

  • Returns this

forward

Navigate to the next page in the router history.

This method will do nothing if there is no next page.

  • Returns this

clear

Clear the current page id and navigation history. All pages will be removed from the stage.

  • Returns this

cleanHistory

Clean the navigation history while keeping the current page. This will remove all forward and backward history entries, leaving only the current page in history.

  • Returns this

getCurrentId

Get the current page id.

  • Returns string | null - The current page id, or null if no page is active

onExitComplete

Register a handler for the page exit completion event.

router.onExitComplete(() => {
    console.log("Page exit animation completed");
});
  • handler: () => void - The callback function to be called when page exit is complete
  • Returns LiveGameEventToken - Token for unsubscribing from the event, see LiveGameEventToken

onceExitComplete

Register a one-time handler for the page exit completion event. The handler will be automatically unsubscribed after the first event.

router.onceExitComplete(() => {
    console.log("Page exit animation completed once");
});
  • handler: () => void - The callback function to be called when page exit is complete
  • Returns LiveGameEventToken - Token for unsubscribing from the event, see LiveGameEventToken

onPageMount

Register a handler for the page mount event.

router.onPageMount(() => {
    console.log("New page has been mounted");
});
  • handler: () => void - The callback function to be called when a new page is mounted
  • Returns LiveGameEventToken - Token for unsubscribing from the event, see LiveGameEventToken

oncePageMount

Register a one-time handler for the page mount event. The handler will be automatically unsubscribed after the first event.

router.oncePageMount(() => {
    console.log("New page has been mounted once");
});
  • handler: () => void - The callback function to be called when a new page is mounted
  • Returns LiveGameEventToken - Token for unsubscribing from the event, see LiveGameEventToken