Hugging Face's logo

Spaces:
tripolskypetr
/
react-declarative-docs
Running

App Files Community
react-declarative-docs / documents /docs_api_hooks_navigation-hooks.html
tripolskypetr's picture
tripolskypetr
patch
9375fc1
raw
history blame contribute delete
44.5 kB
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>docs/api/hooks/navigation-hooks | react-declarative</title><meta name="description" content="Documentation for react-declarative"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">react-declarative</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">react-declarative</a></li><li><a href="docs_api_hooks_navigation-hooks.html">docs/api/hooks/navigation-hooks</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="navigation-hooks-userouteparams-and-userouteitem" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Navigation hooks: useRouteParams and useRouteItem<a href="#navigation-hooks-userouteparams-and-userouteitem" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><p>Navigation hooks and utilities let you integrate with the <code>history</code> library's routing model without coupling your components to a global router. You define routes as plain objects with a <code>path</code> string, pass in a <code>history</code> instance, and the hooks reactively return the matched params or item as the URL changes. The utility functions — <code>parseRouteUrl</code>, <code>getRouteParams</code>, and <code>toRouteUrl</code> — work independently of React and can be used anywhere in your application.</p>
<a id="userouteparams" class="tsd-anchor"></a><h2 class="tsd-anchor-link">useRouteParams<a href="#userouteparams" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Watches the current <code>history</code> location and returns the URL parameters extracted from the first matching route. The returned object updates automatically whenever the location changes.</p>
<a id="signature" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Signature<a href="#signature" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="ts"><span class="hl-4">interface</span><span class="hl-1"> </span><span class="hl-7">ISwitchItem</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">path</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> [</span><span class="hl-2">key</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">]: </span><span class="hl-7">any</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">useRouteParams</span><span class="hl-1">&lt;</span><br/><span class="hl-1"> </span><span class="hl-7">T</span><span class="hl-1"> </span><span class="hl-4">extends</span><span class="hl-1"> </span><span class="hl-7">Record</span><span class="hl-1">&lt;</span><span class="hl-7">string</span><span class="hl-1">, </span><span class="hl-7">any</span><span class="hl-1">&gt; = </span><span class="hl-7">Record</span><span class="hl-1">&lt;</span><span class="hl-7">string</span><span class="hl-1">, </span><span class="hl-7">any</span><span class="hl-1">&gt;,</span><br/><span class="hl-1"> </span><span class="hl-7">I</span><span class="hl-1"> </span><span class="hl-4">extends</span><span class="hl-1"> </span><span class="hl-7">ISwitchItem</span><span class="hl-1"> = </span><span class="hl-7">ISwitchItem</span><br/><span class="hl-1">&gt;(</span><br/><span class="hl-1"> </span><span class="hl-2">routes</span><span class="hl-1">: </span><span class="hl-7">I</span><span class="hl-1">[],</span><br/><span class="hl-1"> </span><span class="hl-2">history</span><span class="hl-1">: </span><span class="hl-7">MemoryHistory</span><span class="hl-1"> | </span><span class="hl-7">BrowserHistory</span><span class="hl-1"> | </span><span class="hl-7">HashHistory</span><br/><span class="hl-1">): </span><span class="hl-7">T</span><span class="hl-1"> | </span><span class="hl-7">null</span>
</code><button type="button">Copy</button></pre>
<a id="parameters" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Parameters<a href="#parameters" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong><code>routes</code></strong> — <code>ISwitchItem[]</code> (required)</p>
<p>An array of route definitions. Each entry must have a <code>path</code> string that follows the <code>path-to-regexp</code> pattern syntax (e.g., <code>'/users/:id'</code>). Routes are tested in order and the first match wins.</p>
<p><strong><code>history</code></strong> — <code>MemoryHistory | BrowserHistory | HashHistory</code> (required)</p>
<p>A <code>history</code> package instance. You can create one with <code>createBrowserHistory()</code>, <code>createHashHistory()</code>, or <code>createMemoryHistory()</code>.</p>
<a id="return-value" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Return value<a href="#return-value" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Returns <code>T | null</code>. The generic <code>T</code> is a record whose keys correspond to the named parameters in the matched route path. Returns <code>null</code> when no route matches the current pathname.</p>
<a id="usage" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Usage<a href="#usage" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="tsx"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">createBrowserHistory</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&#39;history&#39;</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">useRouteParams</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&#39;react-declarative&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">history</span><span class="hl-1"> = </span><span class="hl-5">createBrowserHistory</span><span class="hl-1">();</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">routes</span><span class="hl-1"> = [</span><br/><span class="hl-1"> { </span><span class="hl-2">path:</span><span class="hl-1"> </span><span class="hl-3">&#39;/users/:userId&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">path:</span><span class="hl-1"> </span><span class="hl-3">&#39;/posts/:postId/comments/:commentId&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">Page</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">params</span><span class="hl-1"> = </span><span class="hl-5">useRouteParams</span><span class="hl-1">&lt;{ </span><span class="hl-2">userId</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1"> }&gt;(</span><span class="hl-2">routes</span><span class="hl-1">, </span><span class="hl-2">history</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-0">if</span><span class="hl-1"> (!</span><span class="hl-2">params</span><span class="hl-1">) </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-6">&lt;</span><span class="hl-7">NotFound</span><span class="hl-1"> </span><span class="hl-6">/&gt;</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-6">&lt;</span><span class="hl-7">UserDetail</span><span class="hl-1"> </span><span class="hl-8">id</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">params</span><span class="hl-9">.</span><span class="hl-2">userId</span><span class="hl-4">}</span><span class="hl-1"> </span><span class="hl-6">/&gt;</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
</code><button type="button">Copy</button></pre>
<hr>
<a id="userouteitem" class="tsd-anchor"></a><h2 class="tsd-anchor-link">useRouteItem<a href="#userouteitem" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Watches the current <code>history</code> location and returns the <strong>entire matching route object</strong> from your routes array. This is useful when your route objects carry metadata — such as page titles, required permissions, or component references — and you need to read that metadata reactively in a layout component.</p>
<a id="signature-1" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Signature<a href="#signature-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="ts"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">useRouteItem</span><span class="hl-1">&lt;</span><br/><span class="hl-1"> </span><span class="hl-7">T</span><span class="hl-1"> </span><span class="hl-4">extends</span><span class="hl-1"> </span><span class="hl-7">Record</span><span class="hl-1">&lt;</span><span class="hl-7">string</span><span class="hl-1">, </span><span class="hl-7">any</span><span class="hl-1">&gt; = </span><span class="hl-7">Record</span><span class="hl-1">&lt;</span><span class="hl-7">string</span><span class="hl-1">, </span><span class="hl-7">any</span><span class="hl-1">&gt;,</span><br/><span class="hl-1"> </span><span class="hl-7">I</span><span class="hl-1"> </span><span class="hl-4">extends</span><span class="hl-1"> </span><span class="hl-7">ISwitchItem</span><span class="hl-1"> = </span><span class="hl-7">ISwitchItem</span><br/><span class="hl-1">&gt;(</span><br/><span class="hl-1"> </span><span class="hl-2">routes</span><span class="hl-1">: </span><span class="hl-7">I</span><span class="hl-1">[],</span><br/><span class="hl-1"> </span><span class="hl-2">history</span><span class="hl-1">: </span><span class="hl-7">MemoryHistory</span><span class="hl-1"> | </span><span class="hl-7">BrowserHistory</span><span class="hl-1"> | </span><span class="hl-7">HashHistory</span><br/><span class="hl-1">): </span><span class="hl-7">I</span><span class="hl-1"> | </span><span class="hl-7">null</span>
</code><button type="button">Copy</button></pre>
<a id="parameters-1" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Parameters<a href="#parameters-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong><code>routes</code></strong> — <code>I[]</code> (required)</p>
<p>Array of route definitions. The objects can carry any additional properties beyond <code>path</code>; the full matched object is returned as-is.</p>
<p><strong><code>history</code></strong> — <code>MemoryHistory | BrowserHistory | HashHistory</code> (required)</p>
<p>A <code>history</code> instance that the hook subscribes to for location changes.</p>
<a id="return-value-1" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Return value<a href="#return-value-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>The matched route object of type <code>I</code>, or <code>null</code> when no route matches. Re-renders the component each time the location changes and produces a different match.</p>
<a id="usage-1" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Usage<a href="#usage-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="tsx"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">createBrowserHistory</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&#39;history&#39;</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">useRouteItem</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&#39;react-declarative&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">history</span><span class="hl-1"> = </span><span class="hl-5">createBrowserHistory</span><span class="hl-1">();</span><br/><br/><span class="hl-4">interface</span><span class="hl-1"> </span><span class="hl-7">AppRoute</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">path</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">title</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">requiresAuth</span><span class="hl-1">: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">routes</span><span class="hl-1">: </span><span class="hl-7">AppRoute</span><span class="hl-1">[] = [</span><br/><span class="hl-1"> { </span><span class="hl-2">path:</span><span class="hl-1"> </span><span class="hl-3">&#39;/&#39;</span><span class="hl-1">, </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">&#39;Home&#39;</span><span class="hl-1">, </span><span class="hl-2">requiresAuth:</span><span class="hl-1"> </span><span class="hl-4">false</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">path:</span><span class="hl-1"> </span><span class="hl-3">&#39;/dashboard&#39;</span><span class="hl-1">, </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">&#39;Dashboard&#39;</span><span class="hl-1">, </span><span class="hl-2">requiresAuth:</span><span class="hl-1"> </span><span class="hl-4">true</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">path:</span><span class="hl-1"> </span><span class="hl-3">&#39;/settings&#39;</span><span class="hl-1">, </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">&#39;Settings&#39;</span><span class="hl-1">, </span><span class="hl-2">requiresAuth:</span><span class="hl-1"> </span><span class="hl-4">true</span><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">AppBar</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">route</span><span class="hl-1"> = </span><span class="hl-5">useRouteItem</span><span class="hl-1">&lt;</span><span class="hl-7">Record</span><span class="hl-1">&lt;</span><span class="hl-7">string</span><span class="hl-1">, </span><span class="hl-7">any</span><span class="hl-1">&gt;, </span><span class="hl-7">AppRoute</span><span class="hl-1">&gt;(</span><span class="hl-2">routes</span><span class="hl-1">, </span><span class="hl-2">history</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> (</span><br/><span class="hl-1"> </span><span class="hl-6">&lt;</span><span class="hl-18">header</span><span class="hl-6">&gt;</span><br/><span class="hl-1"> </span><span class="hl-6">&lt;</span><span class="hl-18">h1</span><span class="hl-6">&gt;</span><span class="hl-4">{</span><span class="hl-2">route</span><span class="hl-9">?.</span><span class="hl-2">title</span><span class="hl-9"> </span><span class="hl-1">??</span><span class="hl-9"> </span><span class="hl-3">&#39;Not Found&#39;</span><span class="hl-4">}</span><span class="hl-6">&lt;/</span><span class="hl-18">h1</span><span class="hl-6">&gt;</span><br/><span class="hl-1"> </span><span class="hl-6">&lt;/</span><span class="hl-18">header</span><span class="hl-6">&gt;</span><br/><span class="hl-1"> );</span><br/><span class="hl-1">}</span>
</code><button type="button">Copy</button></pre>
<hr>
<a id="uselocalhistory" class="tsd-anchor"></a><h2 class="tsd-anchor-link">useLocalHistory<a href="#uselocalhistory" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Creates an <strong>in-memory <code>history</code> instance</strong> that optionally stays synchronized with a parent history. This is useful for nested navigation contexts — for example, a modal wizard or an embedded sub-router — where you want independent forward/back navigation that mirrors the parent's pushes and replaces without affecting the browser URL directly.</p>
<a id="signature-2" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Signature<a href="#signature-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="ts"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">useLocalHistory</span><span class="hl-1">(</span><span class="hl-2">options</span><span class="hl-1">?: {</span><br/><span class="hl-1"> </span><span class="hl-2">history</span><span class="hl-1">?: </span><span class="hl-7">History</span><span class="hl-1">; </span><span class="hl-17">// parent history to sync with</span><br/><span class="hl-1"> </span><span class="hl-2">pathname</span><span class="hl-1">?: </span><span class="hl-7">string</span><span class="hl-1">; </span><span class="hl-17">// initial pathname when no parent is provided</span><br/><span class="hl-1"> </span><span class="hl-5">onNavigate</span><span class="hl-1">?: (</span><span class="hl-2">update</span><span class="hl-1">: </span><span class="hl-7">Update</span><span class="hl-1">) </span><span class="hl-4">=&gt;</span><span class="hl-1"> </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><span class="hl-1">}): {</span><br/><span class="hl-1"> </span><span class="hl-2">history</span><span class="hl-1">: </span><span class="hl-7">MemoryHistory</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
</code><button type="button">Copy</button></pre>
<a id="parameters-2" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Parameters<a href="#parameters-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong><code>options.history</code></strong> — <code>History</code></p>
<p>A parent <code>history</code> instance to sync with. When the parent pushes or replaces a location, the local history mirrors the change. If omitted, the local history starts at <code>pathname</code> and is fully independent.</p>
<p><strong><code>options.pathname</code></strong> — <code>string</code> (default: <code>'/'</code>)</p>
<p>The initial pathname for the local history. Only used when no parent <code>history</code> is provided or as a fallback if the parent has no location yet.</p>
<p><strong><code>options.onNavigate</code></strong> — <code>(update: Update) =&gt; void</code></p>
<p>Called whenever the parent history navigates (push or replace). Receives the full <code>Update</code> object from the <code>history</code> package.</p>
<a id="return-value-2" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Return value<a href="#return-value-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>An object with a single <code>history</code> property — a <code>MemoryHistory</code> instance you can pass to <code>useRouteParams</code>, <code>useRouteItem</code>, or any component that accepts a history prop.</p>
<a id="usage-2" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Usage<a href="#usage-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="tsx"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">createBrowserHistory</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&#39;history&#39;</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">useLocalHistory</span><span class="hl-1">, </span><span class="hl-2">useRouteParams</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&#39;react-declarative&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">globalHistory</span><span class="hl-1"> = </span><span class="hl-5">createBrowserHistory</span><span class="hl-1">();</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">wizardRoutes</span><span class="hl-1"> = [</span><br/><span class="hl-1"> { </span><span class="hl-2">path:</span><span class="hl-1"> </span><span class="hl-3">&#39;/step/1&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">path:</span><span class="hl-1"> </span><span class="hl-3">&#39;/step/2&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">path:</span><span class="hl-1"> </span><span class="hl-3">&#39;/step/3&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">WizardModal</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> { </span><span class="hl-2">history</span><span class="hl-1">: </span><span class="hl-10">localHistory</span><span class="hl-1"> } = </span><span class="hl-5">useLocalHistory</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">pathname:</span><span class="hl-1"> </span><span class="hl-3">&#39;/step/1&#39;</span><span class="hl-1">,</span><br/><span class="hl-1"> });</span><br/><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">params</span><span class="hl-1"> = </span><span class="hl-5">useRouteParams</span><span class="hl-1">(</span><span class="hl-2">wizardRoutes</span><span class="hl-1">, </span><span class="hl-2">localHistory</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">handleNext</span><span class="hl-1"> = () </span><span class="hl-4">=&gt;</span><span class="hl-1"> </span><span class="hl-2">localHistory</span><span class="hl-1">.</span><span class="hl-5">push</span><span class="hl-1">(</span><span class="hl-3">&#39;/step/2&#39;</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> (</span><br/><span class="hl-1"> </span><span class="hl-6">&lt;</span><span class="hl-18">div</span><span class="hl-6">&gt;</span><br/><span class="hl-1"> </span><span class="hl-6">&lt;</span><span class="hl-18">p</span><span class="hl-6">&gt;</span><span class="hl-1">Current step: </span><span class="hl-4">{</span><span class="hl-2">params</span><span class="hl-9">?.</span><span class="hl-2">step</span><span class="hl-9"> </span><span class="hl-1">??</span><span class="hl-9"> </span><span class="hl-3">&#39;1&#39;</span><span class="hl-4">}</span><span class="hl-6">&lt;/</span><span class="hl-18">p</span><span class="hl-6">&gt;</span><br/><span class="hl-1"> </span><span class="hl-6">&lt;</span><span class="hl-18">button</span><span class="hl-1"> </span><span class="hl-8">onClick</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">handleNext</span><span class="hl-4">}</span><span class="hl-6">&gt;</span><span class="hl-1">Next</span><span class="hl-6">&lt;/</span><span class="hl-18">button</span><span class="hl-6">&gt;</span><br/><span class="hl-1"> </span><span class="hl-6">&lt;/</span><span class="hl-18">div</span><span class="hl-6">&gt;</span><br/><span class="hl-1"> );</span><br/><span class="hl-1">}</span>
</code><button type="button">Copy</button></pre>
<hr>
<a id="parserouteurl" class="tsd-anchor"></a><h2 class="tsd-anchor-link">parseRouteUrl<a href="#parserouteurl" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Matches a URL against a <code>path-to-regexp</code> template and returns the match result, including any named parameters and the matched substring. Unlike the React hooks above, this is a plain function you can call anywhere.</p>
<a id="signature-3" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Signature<a href="#signature-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="ts"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">parseRouteUrl</span><span class="hl-1">(</span><br/><span class="hl-1"> </span><span class="hl-2">template</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url</span><span class="hl-1">: </span><span class="hl-7">string</span><br/><span class="hl-1">): </span><span class="hl-7">MatchResult</span><span class="hl-1">&lt;</span><span class="hl-7">object</span><span class="hl-1">&gt; | </span><span class="hl-7">null</span>
</code><button type="button">Copy</button></pre>
<a id="parameters-3" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Parameters<a href="#parameters-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong><code>template</code></strong> — <code>string</code> (required)</p>
<p>A <code>path-to-regexp</code> compatible route pattern, e.g. <code>'/users/:id'</code> or <code>'/posts/:postId/comments/:commentId'</code>.</p>
<p><strong><code>url</code></strong> — <code>string</code> (required)</p>
<p>The URL pathname to match against the template. URI components are decoded automatically.</p>
<a id="return-value-3" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Return value<a href="#return-value-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Returns the <code>path-to-regexp</code> <code>MatchResult</code> object (with <code>params</code>, <code>path</code>, <code>index</code>) when the template matches, or <code>null</code> when it does not.</p>
<a id="usage-3" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Usage<a href="#usage-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="ts"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">parseRouteUrl</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&#39;react-declarative&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">result</span><span class="hl-1"> = </span><span class="hl-5">parseRouteUrl</span><span class="hl-1">(</span><span class="hl-3">&#39;/users/:id&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;/users/42&#39;</span><span class="hl-1">);</span><br/><span class="hl-17">// result.params =&gt; { id: &#39;42&#39; }</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">noMatch</span><span class="hl-1"> = </span><span class="hl-5">parseRouteUrl</span><span class="hl-1">(</span><span class="hl-3">&#39;/users/:id&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;/posts/42&#39;</span><span class="hl-1">);</span><br/><span class="hl-17">// noMatch =&gt; null</span>
</code><button type="button">Copy</button></pre>
<hr>
<a id="getrouteparams" class="tsd-anchor"></a><h2 class="tsd-anchor-link">getRouteParams<a href="#getrouteparams" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Iterates a routes array and returns the named parameters extracted from the first matching route as a plain object. This is the same matching logic used internally by <code>useRouteParams</code>.</p>
<a id="signature-4" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Signature<a href="#signature-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="ts"><span class="hl-4">interface</span><span class="hl-1"> </span><span class="hl-7">ISwitchItem</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">path</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">getRouteParams</span><span class="hl-1">&lt;</span><span class="hl-7">T</span><span class="hl-1"> = </span><span class="hl-7">Record</span><span class="hl-1">&lt;</span><span class="hl-7">string</span><span class="hl-1">, </span><span class="hl-7">any</span><span class="hl-1">&gt;&gt;(</span><br/><span class="hl-1"> </span><span class="hl-2">routes</span><span class="hl-1">: </span><span class="hl-7">ISwitchItem</span><span class="hl-1">[],</span><br/><span class="hl-1"> </span><span class="hl-2">pathname</span><span class="hl-1">: </span><span class="hl-7">string</span><br/><span class="hl-1">): </span><span class="hl-7">T</span><span class="hl-1"> | </span><span class="hl-7">null</span>
</code><button type="button">Copy</button></pre>
<a id="parameters-4" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Parameters<a href="#parameters-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong><code>routes</code></strong> — <code>ISwitchItem[]</code> (required)</p>
<p>Array of route objects. Only the <code>path</code> property is used for matching.</p>
<p><strong><code>pathname</code></strong> — <code>string</code> (required)</p>
<p>The URL pathname to match.</p>
<a id="return-value-4" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Return value<a href="#return-value-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Returns an object of type <code>T</code> whose keys are the named segments from the matching route's <code>path</code>, or <code>null</code> if no route matches.</p>
<a id="usage-4" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Usage<a href="#usage-4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="ts"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">getRouteParams</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&#39;react-declarative&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">routes</span><span class="hl-1"> = [{ </span><span class="hl-2">path:</span><span class="hl-1"> </span><span class="hl-3">&#39;/orders/:orderId&#39;</span><span class="hl-1"> }];</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">params</span><span class="hl-1"> = </span><span class="hl-5">getRouteParams</span><span class="hl-1">&lt;{ </span><span class="hl-2">orderId</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1"> }&gt;(</span><span class="hl-2">routes</span><span class="hl-1">, </span><span class="hl-3">&#39;/orders/99&#39;</span><span class="hl-1">);</span><br/><span class="hl-17">// params =&gt; { orderId: &#39;99&#39; }</span>
</code><button type="button">Copy</button></pre>
<hr>
<a id="torouteurl" class="tsd-anchor"></a><h2 class="tsd-anchor-link">toRouteUrl<a href="#torouteurl" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Builds a URL by filling a <code>path-to-regexp</code> template with a parameters object. Use this whenever you need to programmatically construct a URL for navigation or links.</p>
<a id="signature-5" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Signature<a href="#signature-5" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="ts"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">toRouteUrl</span><span class="hl-1">(</span><span class="hl-2">template</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">, </span><span class="hl-2">params</span><span class="hl-1">: </span><span class="hl-7">object</span><span class="hl-1">): </span><span class="hl-7">string</span>
</code><button type="button">Copy</button></pre>
<a id="parameters-5" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Parameters<a href="#parameters-5" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p><strong><code>template</code></strong> — <code>string</code> (required)</p>
<p>A <code>path-to-regexp</code> compatible route pattern, e.g. <code>'/users/:userId/posts/:postId'</code>.</p>
<p><strong><code>params</code></strong> — <code>object</code> (required)</p>
<p>An object whose keys match the named segments in <code>template</code>. URI encoding is applied automatically.</p>
<a id="return-value-5" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Return value<a href="#return-value-5" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>A fully constructed URL string with all named segments replaced by their values from <code>params</code>.</p>
<a id="usage-5" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Usage<a href="#usage-5" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><pre><code class="ts"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">toRouteUrl</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&#39;react-declarative&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">url</span><span class="hl-1"> = </span><span class="hl-5">toRouteUrl</span><span class="hl-1">(</span><span class="hl-3">&#39;/users/:userId/posts/:postId&#39;</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">userId:</span><span class="hl-1"> </span><span class="hl-3">&#39;42&#39;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">postId:</span><span class="hl-1"> </span><span class="hl-3">&#39;7&#39;</span><span class="hl-1">,</span><br/><span class="hl-1">});</span><br/><span class="hl-17">// url =&gt; &#39;/users/42/posts/7&#39;</span><br/><br/><span class="hl-17">// Use with history.push for programmatic navigation</span><br/><span class="hl-2">history</span><span class="hl-1">.</span><span class="hl-5">push</span><span class="hl-1">(</span><span class="hl-5">toRouteUrl</span><span class="hl-1">(</span><span class="hl-3">&#39;/orders/:id&#39;</span><span class="hl-1">, { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-2">order</span><span class="hl-1">.</span><span class="hl-2">id</span><span class="hl-1"> }));</span>
</code><button type="button">Copy</button></pre>
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#navigation-hooks-userouteparams-and-userouteitem"><span>Navigation hooks: use<wbr/>Route<wbr/>Params and use<wbr/>Route<wbr/>Item</span></a><ul><li><a href="#userouteparams"><span>use<wbr/>Route<wbr/>Params</span></a></li><li><ul><li><a href="#signature"><span>Signature</span></a></li><li><a href="#parameters"><span>Parameters</span></a></li><li><a href="#return-value"><span>Return value</span></a></li><li><a href="#usage"><span>Usage</span></a></li></ul></li><li><a href="#userouteitem"><span>use<wbr/>Route<wbr/>Item</span></a></li><li><ul><li><a href="#signature-1"><span>Signature</span></a></li><li><a href="#parameters-1"><span>Parameters</span></a></li><li><a href="#return-value-1"><span>Return value</span></a></li><li><a href="#usage-1"><span>Usage</span></a></li></ul></li><li><a href="#uselocalhistory"><span>use<wbr/>Local<wbr/>History</span></a></li><li><ul><li><a href="#signature-2"><span>Signature</span></a></li><li><a href="#parameters-2"><span>Parameters</span></a></li><li><a href="#return-value-2"><span>Return value</span></a></li><li><a href="#usage-2"><span>Usage</span></a></li></ul></li><li><a href="#parserouteurl"><span>parse<wbr/>Route<wbr/>Url</span></a></li><li><ul><li><a href="#signature-3"><span>Signature</span></a></li><li><a href="#parameters-3"><span>Parameters</span></a></li><li><a href="#return-value-3"><span>Return value</span></a></li><li><a href="#usage-3"><span>Usage</span></a></li></ul></li><li><a href="#getrouteparams"><span>get<wbr/>Route<wbr/>Params</span></a></li><li><ul><li><a href="#signature-4"><span>Signature</span></a></li><li><a href="#parameters-4"><span>Parameters</span></a></li><li><a href="#return-value-4"><span>Return value</span></a></li><li><a href="#usage-4"><span>Usage</span></a></li></ul></li><li><a href="#torouteurl"><span>to<wbr/>Route<wbr/>Url</span></a></li><li><ul><li><a href="#signature-5"><span>Signature</span></a></li><li><a href="#parameters-5"><span>Parameters</span></a></li><li><a href="#return-value-5"><span>Return value</span></a></li><li><a href="#usage-5"><span>Usage</span></a></li></ul></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">react-declarative</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>