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

riyad

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

5 y3 [% D4 V7 T2 \" w  d/ b  L安装
4 J- a+ \3 ]. qpnpm :
/ z" b' k9 D: P* K. j# C% v5 D9 b

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

复制代码

npm :
( \: d% O% W3 ?+ c) u5 c) G9 ~. `

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

复制代码

yarn :
0 K9 X: ^# b' u0 J: ~

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

复制代码

使用方法​

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

下面是它的使用方法：

1. import { useIntegration } from '@telegram-apps/react-router-integration';
   0 S7 w3 F' F+ l) i; w7 ~
2. import { initNavigator } from '@telegram-apps/sdk-react';
   
3. import { useEffect, useMemo } from 'react';
   & E9 L+ r1 t. |; I
4. import {
   
5.   Navigate,
   / [; t- x% A2 E7 E# ?! b5 Q
6.   Route,
   
7.   Router,
   5 A3 y& Q& e) i
8.   Routes,
   0 i# `) V+ j. f% u  v
9. } from 'react-router-dom';
   
10. 
    / R% \* W: T  Q( b9 m; k
11. import { IndexPage } from './IndexPage.js';
    2 e) l2 }' ]2 Q
12. 
    
13. function App() {
    
14.   // Create a new application navigator and attach it to the browser history, so it could modify
    
15.   // it and listen to its changes.
    + q6 \) f, L% {$ X: A
16.   const navigator = useMemo(() => initNavigator('app-navigation-state'), []);
    , C1 g7 d6 J1 o$ `4 x
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
    , D1 u* g( Y5 H7 o* S3 H
20.   // as browser history.
      w3 g; d5 g9 U" E
21.   useEffect(() => {
    + R6 S5 K4 e( R- ^& H! {
22.     navigator.attach();
    
23.     return () => navigator.detach();
    
24.   }, [navigator]);
    ) n1 J: J0 T7 @& ?& x
25. 
    
26.   return (
    8 b% g( \/ n' _$ ]9 t% |, g$ L
27.     <Router location={location} navigator={reactNavigator}>
    
28.       <Routes>
    
29.         <Route path={'/'} component={IndexPage}/>
    
30.         <Route path={'*'} element={<Navigate href={'/'}/>}/>
    % _! H* y5 {+ C6 \
31.       </Routes>
    
32.     </Router>
    & f; x0 l/ {$ y7 A  ], {; K
33.   );
    
34. }

复制代码

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

/ R& s1 Z- _) P0 i" h
+ ?; b4 G) J, y# n3 N( ?8 Q2 t. t( I
' M* }, R! @  J
& D# Z6 G8 B# X6 P3 K' A2 x+ }