@budarin/use-route 1.0.0 → 1.0.2

package/README.md

@@ -21,6 +21,11 @@
 [![bundle](https://img.shields.io/bundlephobia/minzip/@budarin/use-route)](https://bundlephobia.com/result?p=@budarin/use-route)
 [![GitHub](https://img.shields.io/github/license/budarin/use-route)](https://github.com/budarin/use-route)
 
+**Живое демо:** запуск в браузере без установки; исходники в папке [demo/](https://github.com/budarin/use-route/tree/master/demo). Чтобы открыть в новой вкладке: Ctrl+клик (Cmd+клик на Mac).
+
+- [Open in StackBlitz](https://stackblitz.com/github/budarin/use-route/tree/master/demo)
+- [Open in CodeSandbox](https://githubbox.com/budarin/use-route/tree/master/demo) — если StackBlitz недоступен (например, в РФ без VPN)
+
 ## ✨ Особенности
 
 - ✅ **Динамическое дерево** — маршрутизация в рантайме по pathname/params, без статичного route tree
@@ -443,12 +448,15 @@ function DashboardSection() {
         <div>
             {/* При URL /dashboard/reports pathname === '/reports' */}
             <p>Раздел Dashboard. Путь: {pathname}</p>
+
             <button type="button" onClick={() => navigate('/reports')}>
                 Отчёты → /dashboard/reports
             </button>
+
             <button type="button" onClick={() => navigate('/settings')}>
                 Настройки → /dashboard/settings
             </button>
+
             {/* Переход вне раздела: свой base в вызове */}
             <button type="button" onClick={() => navigate('/', { base: '' })}>
                 На главную

package/demo/dist/assets/index-CehTkyXl.css

@@ -0,0 +1 @@
+*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif;line-height:1.5;color:#1a1a1a;background:#f5f5f5}#root{min-height:100vh}a{color:#06c;text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;cursor:pointer;padding:.4em .8em;border:1px solid #ccc;border-radius:4px;background:#fff}button:hover:not(:disabled){background:#f0f0f0}button:disabled{opacity:.6;cursor:not-allowed}.demo-nav{background:#fff;padding:.75rem 1rem;border-bottom:1px solid #e0e0e0;display:flex;flex-direction:column;gap:.5rem}.demo-nav-url{font-size:.85rem;color:#555}.demo-nav-url code{background:#f0f0f0;padding:.2em .4em;border-radius:4px;word-break:break-all}.demo-nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}.demo-nav a,.demo-nav .nav-link{padding:.25em .5em;border-radius:4px}.demo-nav a.active,.demo-nav .nav-link.active{background:#e8f0fe;color:#1967d2}.demo-content{max-width:640px;margin:0 auto;padding:1.5rem 1rem;background:#fff;min-height:calc(100vh - 52px);border-radius:0 0 8px 8px;box-shadow:0 1px 3px #00000014}.demo-content h1{margin-top:0;font-size:1.5rem}.demo-content .demo-lead{color:#444;margin-bottom:1rem;padding:.75rem;background:#f8f9fa;border-radius:6px;border-left:3px solid #0066cc}.demo-content h2{font-size:1.1rem;margin:1rem 0 .5rem}.demo-content code{background:#f0f0f0;padding:.1em .3em;border-radius:3px;font-size:.9em}.demo-content pre{background:#f5f5f5;padding:.75rem;border-radius:4px;overflow-x:auto;font-size:.85em}.demo-list{list-style:none;padding:0;margin:0}.demo-list li{margin:.5rem 0}.demo-list a{display:inline-block;padding:.35em .5em;border-radius:4px;background:#f0f0f0}.demo-list a:hover{background:#e0e0e0;text-decoration:none}.demo-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}