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

riyad

Telegram Mini Apps Navigator 和 @solidjs/router 的集成。

安装
pnpm :

复制代码

npm :

复制代码

yarn :

复制代码

使用方法

目前，该软件包只提供了一个函数，用于创建 @solidjs/router 路由器的集成 - createRouter。

下面是它的使用方法：

import { Routes, Route, Navigate } from '@solidjs/router';7 w9 n$ i/ R3 V. R
import { onCleanup } from 'solid-js';. k X" X) I7 E: A! ?$ I
import { initNavigator } from '@telegram-apps/sdk-solid';
5 f6 y4 |0 o$ D1 p4 k' G' D% B
import { createRouter } from '@telegram-apps/solid-router-integration'; s9 p3 e/ ~0 i0 `& q
. P) V M3 W8 y7 [, O
import { IndexPage } from './IndexPage.js';$ B* ^8 T" x7 r, @
) Z+ w1 i# i b/ p/ J
function App() {' ~) C7 J4 ]: l4 f$ S
// We should create navigator to pass it to integration creation.( k" S. u( U* g$ Z2 M2 p
const navigator = initNavigator('app-navigator-state');- n& I) I+ d l* {2 ]/ C8 \6 q
6 ]; d6 U3 Y: h
// Then, to allow this navigator update current browser history, : x+ ~5 `" J/ [2 `
// we should attach it. Otherwise, it will work in memory mode.7 G/ D8 S) m& R
void navigator.attach();4 {2 O1 B' V7 K! C. d. S
onCleanup(() => {: w F0 l" q# V% u4 P5 @7 s
navigator.detach();% }' E# ]! U1 h* t ^3 [
});
0 Z- k. A8 N" J( n
. \% d' x( Z7 ?4 x; H" b8 u
const Router = createRouter(navigator);8 D" J2 }7 D) y; g* C! m/ { M
5 _9 R% I9 @. N/ y( o8 [
return (
9 s# Z# l* G) o& b
<Router>
, h% i, y/ n* `( P. i/ ^
<Routes>
9 N1 `: b/ G# k
<Route path={'/'} component={IndexPage}/>! R) ]& ?' _. J( A
<Route path={'*'} element={<Navigate href={'/'}/>}/>; f* d C. m; L6 O& M8 _( f
</Routes>+ w( E# n$ }4 ]" f5 v) i: I, y! T
</Router>' T! H8 J* t! ^: d
);
/ c3 j# a% u% L2 C
}

复制代码

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