@telegram-apps/react-router-integration

Telegram Mini Apps Navigator 和 react-router-dom 的集成.

安装

pnpm

pnpm i @telegram-apps/react-router-integration

npm

npm i @telegram-apps/react-router-integration

yarn

yarn add @telegram-apps/react-router-integration

使用方法

目前，该软件包只提供一个函数，用于创建 react-router-dom 路由器的集成 - useIntegration。

下面是它的使用方法：

import { useIntegration } from '@telegram-apps/react-router-integration';
import { initNavigator } from '@telegram-apps/sdk-react';
import { useEffect, useMemo } from 'react';
import {
  Navigate,
  Route,
  Router,
  Routes,
} from 'react-router-dom';

import { IndexPage } from './IndexPage.js';

function App() {
  // Create a new application navigator and attach it to the browser history, so it could modify
  // it and listen to its changes.
  const navigator = useMemo(() => initNavigator('app-navigation-state'), []);
  const [location, reactNavigator] = useIntegration(navigator);

  // Don't forget to attach the navigator to allow it to control the BackButton state as well
  // as browser history.
  useEffect(() => {
    navigator.attach();
    return () => navigator.detach();
  }, [navigator]);

  return (
    <Router location={location} navigator={reactNavigator}>
      <Routes>
        <Route path={'/'} component={IndexPage}/>
        <Route path={'*'} element={<Navigate href={'/'}/>}/>
      </Routes>
    </Router>
  );
}

您可以通过 我们的 React 模板 了解更多关于如何使用它的实际应用。