Telegram 小程序 | TypeScript @telegram-apps/react-router-integration

riyad

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

8 g; {' X- e1 {" j安装
pnpm :
2 F% y# C# k' e

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

复制代码

npm :

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

复制代码

yarn :

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

复制代码

使用方法​

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

下面是它的使用方法：

1. import { useIntegration } from '@telegram-apps/react-router-integration';
   
2. import { initNavigator } from '@telegram-apps/sdk-react';
   % _4 J! ?+ X9 H7 }$ ^
3. import { useEffect, useMemo } from 'react';
   
4. import {
   
5.   Navigate,
   
6.   Route,
   
7.   Router,
   
8.   Routes,
   . r  {, z$ h8 g/ s2 l6 d4 w9 n' g
9. } from 'react-router-dom';
   
10. 
    
11. import { IndexPage } from './IndexPage.js';
    
12. 
    
13. function App() {
    2 N% G3 V( M; J- H, Q1 a% Z7 l. U
14.   // Create a new application navigator and attach it to the browser history, so it could modify
    . ?9 E% y2 B. ?
15.   // it and listen to its changes.
    # o6 t. d) p4 ?1 L$ u; O, h' R
16.   const navigator = useMemo(() => initNavigator('app-navigation-state'), []);
    0 Y$ I  F9 W! x: s- D2 ]
17.   const [location, reactNavigator] = useIntegration(navigator);
    
18. 
    
19.   // Don't forget to attach the navigator to allow it to control the BackButton state as well
    ) l, z$ I( l! ?: s( {
20.   // as browser history.
    " @% r" e8 J) k! T
21.   useEffect(() => {
    % N7 S, a, p- \" U- ]& b# M
22.     navigator.attach();
    
23.     return () => navigator.detach();
    
24.   }, [navigator]);
    
25. 
    + u" q0 G) R9 Q$ i  H
26.   return (
    9 X! \3 j2 v  o7 t9 m/ J& U" @
27.     <Router location={location} navigator={reactNavigator}>
    
28.       <Routes>
    
29.         <Route path={'/'} component={IndexPage}/>
    6 D1 e0 X/ M. C6 S& W$ i& u
30.         <Route path={'*'} element={<Navigate href={'/'}/>}/>
    
31.       </Routes>
    
32.     </Router>
      d1 O6 x8 [6 N' p: G5 J
33.   );
    ( Y: W  p' g) b$ w9 r3 P1 a
34. }

复制代码

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

& A8 E5 Y" v8 q

) L" W# y2 |* X" |1 Q

; e0 @( [" ^' N' l2 s( d