mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
Tomas Dvorak
17 lines
6.7 KiB
JSON
17 lines
6.7 KiB
JSON
{
|
|
"id": "edb2cd1b70fa4904abef7403",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "memory-router",
|
|
"content": "---\ntitle: MemoryRouter\nuse_cases: \u003e-\n testing routing, controlled navigation, internal history, unit tests,\n programmatic routing\ntags:\n - testing\n - memory\n - history\n - component\n - navigation\n - programmatic\nversion: '1.0'\ndescription: \u003e-\n MemoryRouter keeps routing history in memory for complete control, ideal for\n testing scenarios and programmatic navigation management.\n---\n\nThe `MemoryRouter` can be used to route while keeping the entire routing history within internal memory.\nOther routers keep history externally such as in the url like the [`\u003cHashRouter\u003e`](/solid-router/reference/components/hash-router) or in the browser history like [`\u003cRouter\u003e`](/solid-router/reference/components/memory-router).\n\nKeeping the history in memory is useful when you want full control over the routing history.\nSince `MemoryRouter` can manipulate `MemoryHistory`, it is often used for testing purposes.\n\n```jsx\nimport { MemoryRouter, createMemoryHistory, A } from \"@solidjs/router\";\nimport { Suspense } from \"solid-js\";\n\nexport default function App() {\n\tconst history = createMemoryHistory();\n\n\tconst toHome = () =\u003e {\n\t\thistory.set({ value: \"/\" });\n\t};\n\tconst toAbout = () =\u003e {\n\t\thistory.set({ value: \"/about\" });\n\t};\n\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cbutton onClick={toHome}\u003e{'\"/\"'}\u003c/button\u003e\n\t\t\t\u003cbutton onClick={toAbout}\u003e{'\"/about\"'}\u003c/button\u003e\n\n\t\t\t\u003cMemoryRouter\n\t\t\t\thistory={history}\n\t\t\t\troot={(props) =\u003e \u003cSuspense\u003e{props.children}\u003c/Suspense\u003e}\n\t\t\t\u003e\n\t\t\t\t{/*... routes */}\n\t\t\t\u003c/MemoryRouter\u003e\n\t\t\u003c/\u003e\n\t);\n}\n```\n\nIn this example, a history object is pre-filled to navigate to the `/about` route, which is then passed to the `MemoryRouter`.\n\n## Manipulating the history\n\nThe `MemoryHistory` object contains the following methods, which you can use to control the navigation of your app.\n\n- The `get` method retrieves the current route as a string, while the `set` method navigates to a new route, allowing for optional parameters like replacing the current history entry or scrolling to a DOM element id.\n- The `back` and `forward` methods mimic the browser's back and forward buttons, respectively, and the `go` method navigates a specific number of steps in the history, either backward or forward.\n- The `listen` method registers a callback to be called on navigation change.\n\n## Properties\n\n### `MemoryHistory`\n\n| Method | Signature | Description |\n| --------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `get` | `get(): string` | Returns the current route. |\n| `set` | `set({ value: string, scroll?: boolean, replace?: boolean })` | Navigates to a new route. `value`: URL to navigate to. `scroll`: Scrolls to element by ID (default: `false`). `replace`: Replaces the current history entry (default: `false`). |\n| `back` | `back(): void` | Navigates 1 step back in the history. Corresponds to `go(-1)`. |\n| `forward` | `forward(): void` | Navigates 1 step forward in the history. Corresponds to `go(1)`. |\n| `go` | `go(n: number): void` | Navigates n steps in the history. Negative for back, positive for forward. Clamped to history length. |\n| `listen` | `listen(listener: (value: string) =\u003e void): () =\u003e void` | Registers a listener that will be called on navigation. |\n\n### `MemoryRouter`\n\n| Property | Type | Description |\n| ------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------ |\n| children | `JSX.Element`, `RouteDefinition`, or `RouteDefinition[]` | The route definitions |\n| root | Component | Top level layout component |\n| base | string | Base url to use for matching routes |\n| actionBase | string | Root url for server actions, default: `/_server` |\n| preload | boolean | Enables/disables preloads globally, default: `true` |\n| explicitLinks | boolean | Disables all anchors being intercepted and instead requires `\u003cA\u003e`. default: `false` |\n| history | MemoryHistory | An optionally pre-filled and mutable history object which will store any navigation events |",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/components/memory-router.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/solid-router/reference/components/memory-router.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 5905,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "7694fe141939e7779c84730ddbdd85b734e739c17c0aac6e69ecbf41dc5f2ecb",
|
|
"timestamp": "2026-02-23T11:43:00.19243012+01:00"
|
|
} |