@telegram-apps/react-router-integration
Telegram Mini Apps Navigator 和 react-router-dom 的集成.
安装
bash
pnpm i @telegram-apps/react-router-integration
bash
npm i @telegram-apps/react-router-integration
bash
yarn add @telegram-apps/react-router-integration
使用方法
目前,该软件包只提供一个函数,用于创建 react-router-dom
路由器的集成 - useIntegration
。
下面是它的使用方法:
jsx
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 模板 了解更多关于如何使用它的实际应用。