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

riyad

Telegram Mini Apps Navigator 和 react-router-dom 的集成.
* b3 X! l2 T" A
安装
: ^) `( z) F& `pnpm :
. k" j3 n- q  [4 K0 y. D

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

复制代码

npm :

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

复制代码

yarn :
7 d# I. Y6 ^/ `" J

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';
   / n( O% O, r3 B. l: O
3. import { useEffect, useMemo } from 'react';
   % c3 ?! D' Q& u1 E5 |# C5 Z
4. import {
   
5.   Navigate,
   
6.   Route,
   
7.   Router,
   3 p1 R, h, I6 E' }9 {- G
8.   Routes,
   ; K* A* Y% B( U0 i1 Q
9. } from 'react-router-dom';
   
10. 
    
11. import { IndexPage } from './IndexPage.js';
    
12. 
    ' ?/ [$ x, F" t; D5 H6 A& {
13. function App() {
    8 o- e( x" O; @* K) Y
14.   // Create a new application navigator and attach it to the browser history, so it could modify
    6 f7 I. ]( Q; P$ e" {, P
15.   // it and listen to its changes.
    
16.   const navigator = useMemo(() => initNavigator('app-navigation-state'), []);
    " y( S( d$ L  F: _9 B
17.   const [location, reactNavigator] = useIntegration(navigator);
    ) F6 F- g8 [) t
18. 
    7 [/ q2 ]; G  C+ {% r- q# o& j
19.   // Don't forget to attach the navigator to allow it to control the BackButton state as well
    
20.   // as browser history.
    $ q- v. L  E- w3 x7 V6 O
21.   useEffect(() => {
    - C$ Z5 s. z# g/ p3 q
22.     navigator.attach();
    $ _" c2 _2 r6 |$ ]) L  J$ h" B. H1 \
23.     return () => navigator.detach();
    1 }: a' i) T) `
24.   }, [navigator]);
    ) p1 W, a! A$ d% b
25. 
    
26.   return (
    9 Y& ^1 ~* S& D' j/ Z+ r4 F  W# S
27.     <Router location={location} navigator={reactNavigator}>
    
28.       <Routes>
    
29.         <Route path={'/'} component={IndexPage}/>
    * _- I2 W  m6 d& C$ V
30.         <Route path={'*'} element={<Navigate href={'/'}/>}/>
    $ s" Z2 u2 D, _1 b
31.       </Routes>
    
32.     </Router>
    
33.   );
    
34. }

复制代码

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

9 ]9 K5 c. W: @0 P" N

! U+ T: }7 C3 J. D# q5 l
1 s  [: F# u  L+ `5 t+ K