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