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

riyad

Telegram Mini Apps Navigator 和 react-router-dom 的集成.
' k1 _) A' R7 j" S. D" g" e( f
2 _, t5 p- l. Y6 ]0 S( o  G5 V安装
pnpm :
! z. ?$ |  ]* ]# P; @4 y

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';
   2 H# g0 r" Y  W) j! B. U
3. import { useEffect, useMemo } from 'react';
   & z) W+ i' X6 J8 `3 z" B) i3 b6 M
4. import {
   
5.   Navigate,
   . m' v  ]# Z) c+ z- H0 v9 i& `
6.   Route,
   & E# K# i& X/ L# f: w" Y3 t
7.   Router,
   
8.   Routes,
   
9. } from 'react-router-dom';
   
10. 
    
11. import { IndexPage } from './IndexPage.js';
    
12. 
    3 Y) T8 k: l+ H6 N3 j' m; H
13. function App() {
    % b7 w- C* Z- g5 l
14.   // Create a new application navigator and attach it to the browser history, so it could modify
    
15.   // it and listen to its changes.
    8 B+ e' R: I5 e9 P: d$ {
16.   const navigator = useMemo(() => initNavigator('app-navigation-state'), []);
    $ o9 L/ R: z. \  T; }. ?: w% w  U
17.   const [location, reactNavigator] = useIntegration(navigator);
    
18. 
    2 \6 `4 P, [2 a6 r8 u
19.   // Don't forget to attach the navigator to allow it to control the BackButton state as well
    
20.   // as browser history.
    
21.   useEffect(() => {
    
22.     navigator.attach();
    
23.     return () => navigator.detach();
    - ^5 g' c; x7 ^, P4 Z; g3 j
24.   }, [navigator]);
    
25. 
    ! Z! _. q2 J  v. S+ P9 \
26.   return (
    8 b/ }4 }/ u" a- u
27.     <Router location={location} navigator={reactNavigator}>
    % P" m! v: V6 q) g5 T
28.       <Routes>
    
29.         <Route path={'/'} component={IndexPage}/>
    ! d$ j* }& W4 r% W# h2 Y
30.         <Route path={'*'} element={<Navigate href={'/'}/>}/>
    / r7 F: f, p0 H
31.       </Routes>
    5 @; ~, n' R  @1 H8 G
32.     </Router>
    7 n6 c4 ]) Q1 J/ @$ I, }$ }
33.   );
    
34. }

复制代码

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

# n" A9 s" k* I- n% b

- u/ {+ t! t1 O; ?7 r

, N6 O+ c( p* V$ M& G: T