@budarin/use-route 1.0.0 → 1.0.2

package/demo/src/pages/UserProfile.tsx

@@ -0,0 +1,33 @@
+import { useRoute } from '@budarin/use-route';
+import { Link } from '../components/Link';
+
+export function UserProfile() {
+    const { pathname, params, matched } = useRoute('/users/:id');
+
+    return (
+        <div className="demo-content">
+            <h1>Профиль пользователя</h1>
+            <p className="demo-lead">
+                Хук вызван с шаблоном <code>/users/:id</code>. Из текущего адреса он достал параметр{' '}
+                <code>id</code> — ниже видно его значение. Кнопки ведут к списку или к другому
+                пользователю.
+            </p>
+            <p>
+                Адрес: <code>{pathname}</code> → параметр <code>id</code> ={' '}
+                <strong>{params.id ?? '—'}</strong>
+                {matched !== undefined && (
+                    <>
+                        {' '}
+                        (шаблон совпал: <strong>{matched ? 'да' : 'нет'}</strong>)
+                    </>
+                )}
+            </p>
+            <h2>Действия</h2>
+            <div className="demo-buttons">
+                <Link to="/users">Вернуться к списку пользователей</Link>
+                <Link to="/users/2">Перейти к пользователю №2</Link>
+                <Link to="/users/3">Перейти к пользователю №3</Link>
+            </div>
+        </div>
+    );
+}

package/demo/src/pages/Users.tsx

@@ -0,0 +1,24 @@
+import { Link } from '../components/Link';
+
+export function Users() {
+    const ids = ['1', '2', '3'];
+
+    return (
+        <div className="demo-content">
+            <h1>Пользователи</h1>
+            <p className="demo-lead">
+                Здесь показано, как из URL достаётся параметр: путь вида <code>/users/123</code>{' '}
+                даёт в хуке <code>params.id = "123"</code>. Нажмите на любого пользователя —
+                откроется его «профиль», а в адресе будет видно номер.
+            </p>
+            <h2>Выберите пользователя</h2>
+            <ul className="demo-list">
+                {ids.map((id) => (
+                    <li key={id}>
+                        <Link to={`/users/${id}`}>Открыть профиль пользователя №{id}</Link>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}

package/demo/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/main.tsx","./src/components/link.tsx","./src/pages/basedemo.tsx","./src/pages/custommatcher.tsx","./src/pages/history.tsx","./src/pages/home.tsx","./src/pages/posts.tsx","./src/pages/pushreplace.tsx","./src/pages/userprofile.tsx","./src/pages/users.tsx"],"version":"5.9.3"}

package/demo/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+    plugins: [react()],
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budarin/use-route",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",