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

riyad

Telegram Mini Apps Navigator 和 react-router-dom 的集成.
5 {- L4 ~& E5 z6 {) S, e+ d7 j
安装
! @! t7 A8 J0 h. U  c) t: E9 Hpnpm :
8 G2 s- U4 o9 o: k

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

复制代码

npm :

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

复制代码

yarn :
% S" C  X6 E% V

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

复制代码

使用方法​

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

下面是它的使用方法：

1. import { useIntegration } from '@telegram-apps/react-router-integration';
   " Z. i# E( q- K# ~$ x7 G/ p$ F3 `3 Z
2. import { initNavigator } from '@telegram-apps/sdk-react';
   % Y* C) D" E# d# D. }2 p
3. import { useEffect, useMemo } from 'react';
   
4. import {
   . g+ R1 ~7 o: I; j/ z( R
5.   Navigate,
   ( U- B. H$ w- g6 s
6.   Route,
   $ s1 \$ R) I3 D* }
7.   Router,
   
8.   Routes,
   5 `4 Q; E8 J1 \) g" C4 P
9. } from 'react-router-dom';
   & P- B+ H% }- n4 F- e, X
10. 
    
11. import { IndexPage } from './IndexPage.js';
    % z+ S$ T9 ]4 A( c( g  h
12. 
    
13. function App() {
    " M% v, L! O" ~0 U8 {. ?
14.   // Create a new application navigator and attach it to the browser history, so it could modify
    
15.   // it and listen to its changes.
    
16.   const navigator = useMemo(() => initNavigator('app-navigation-state'), []);
    
17.   const [location, reactNavigator] = useIntegration(navigator);
    9 D+ l4 l! `8 }4 k5 R+ Z8 m. m  ^
18. 
    $ t$ _* R; [! v% q) u( ?
19.   // Don't forget to attach the navigator to allow it to control the BackButton state as well
    
20.   // as browser history.
    " w" A! S0 B+ b
21.   useEffect(() => {
    ) M. _' i2 [) d/ n
22.     navigator.attach();
    3 Y* T5 [5 v  \2 Q0 l
23.     return () => navigator.detach();
    1 H" H$ C. q' x0 g9 f
24.   }, [navigator]);
    
25. 
    ( x0 }$ s3 [( L4 n
26.   return (
    
27.     <Router location={location} navigator={reactNavigator}>
    
28.       <Routes>
    
29.         <Route path={'/'} component={IndexPage}/>
    0 J# r, j5 A  ~' R5 z. k
30.         <Route path={'*'} element={<Navigate href={'/'}/>}/>
    6 i  {. S( V+ x5 r2 Y' ^: F: k& |
31.       </Routes>
    
32.     </Router>
    - l+ R+ N" H: I8 B) h
33.   );
    6 U7 g: t) t5 d  @" V7 p* T& M
34. }

复制代码

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

$ u& f' _' B* {( Q: ?- U. O, |

- w. D# ]% v# Z
3 W2 X) N/ E2 L; m* Z6 {" R