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

riyad

Telegram Mini Apps Navigator 和 react-router-dom 的集成.
' u6 l' I5 n- W: v3 x' `, _1 q
安装
pnpm :
' Y) G9 K  @  [. e

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

复制代码

npm :

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

复制代码

yarn :
/ i+ e4 e0 e( k! m1 f! J5 R- K

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

复制代码

使用方法​

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

下面是它的使用方法：

1. import { useIntegration } from '@telegram-apps/react-router-integration';
   7 K& |! }0 j+ U  l  J1 K4 N5 \
2. import { initNavigator } from '@telegram-apps/sdk-react';
   
3. import { useEffect, useMemo } from 'react';
   : {8 x2 e. P0 P+ D" H! @
4. import {
   
5.   Navigate,
   ; A( v# b. v- B7 M5 N
6.   Route,
   
7.   Router,
   $ J! |6 b  A, H1 i4 w4 n
8.   Routes,
     s# u1 i7 _* o6 ?/ Y
9. } from 'react-router-dom';
   + e* o0 a, S% q* h* |
10. 
    : h7 M$ x" G5 }6 [
11. import { IndexPage } from './IndexPage.js';
    9 F- l  N( X+ B5 `& F7 W9 Y
12. 
    
13. function App() {
    
14.   // Create a new application navigator and attach it to the browser history, so it could modify
    - ?' ^8 |: \$ v8 J8 ?
15.   // it and listen to its changes.
    0 K2 S% p# z% M5 H! x" ^, k( C
16.   const navigator = useMemo(() => initNavigator('app-navigation-state'), []);
    1 Q: n* Q/ i) C8 [: ?" J# w. E$ s
17.   const [location, reactNavigator] = useIntegration(navigator);
    
18. 
    ! c) W! V+ D' R( M, R9 p( j& E6 x
19.   // Don't forget to attach the navigator to allow it to control the BackButton state as well
    
20.   // as browser history.
    
21.   useEffect(() => {
    ) l& d* m% d. a
22.     navigator.attach();
    * z$ l* p3 x# m6 q8 p! t/ G
23.     return () => navigator.detach();
    0 O. f5 o9 o( w+ N6 t* b5 p# R
24.   }, [navigator]);
    ( P/ f7 Y% c/ i2 S2 k1 V
25. 
    $ s2 U' `' _7 H1 t7 l: y
26.   return (
    
27.     <Router location={location} navigator={reactNavigator}>
    
28.       <Routes>
    
29.         <Route path={'/'} component={IndexPage}/>
    
30.         <Route path={'*'} element={<Navigate href={'/'}/>}/>
    2 m2 Z3 }/ r5 z  R+ b
31.       </Routes>
      C5 s) z: N7 K6 y1 U
32.     </Router>
    ( Z- T6 [) y- q) Z- r1 M1 q
33.   );
    
34. }

复制代码

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

4 m$ S7 @: x( L) U* s" e


- _3 A& z; c& J