页面路由

在 NarraLeaf-React 0.3.0 中，我们引入了自定义播放器用户界面的新方式
您的 UI 内容现在被抽象为页面，您可以使用页面路由 API 在页面之间导航

页面中的元素将按比例缩放以适应播放器的大小

示例

import { Page, Player, useRouter } from "narraleaf-react";

function GameApp() {
    // 获取路由实例
    const router = useRouter();
 
    return (
        <Player
            router={router}
        >
            {/* 您的页面 */}
            <Page id="about" className="...">
                <span>about</span>
            </Page>
 
            <Page id="contact" className="...">
                <span>contact</span>
            </Page>
        </Player>
    );
}

页面路由 API

useRouter

在页面路由 API 中，路由实例用于在页面之间导航
您可以使用 useRouter 钩子获取路由实例

import { useEffect } from "react";
import { useRouter } from "narraleaf-react";

const router = useRouter();
 
// 您可以使用 `router` 实例导航到页面
useEffect(() => {
    router.push("about");
    router.back();
    router.forward();
    router.cleanHistory();
}, []);
 
// 并访问当前页面 ID
console.log(router.getCurrentId());

获取路由实例后，您需要将其传递给 Player 组件

<Player
    router={router}
>
    {/* 您的页面 */}
</Player>

有关更多信息，请查看 Router 和 useRouter

Page

Page 用于定义页面的内容

import { Page } from "narraleaf-react";

<Page id="about" className="...">
    <span>about</span>
    <p>...</p>
</Page>

有关更多信息，请查看 Page

useRouter 路由器