MemoryRouter

The MemoryRouter can be used to route while keeping the entire routing history within internal memory. Other routers keep history externally such as in the url like the <HashRouter> or in the browser history like <Router>.

Keeping the history in memory is useful when you want full control over the routing history. Since MemoryRouter can manipulate MemoryHistory, it is often used for testing purposes.

import { MemoryRouter, createMemoryHistory, A } from "@solidjs/router";
import { Suspense } from "solid-js";

export default function App() {
  const history = createMemoryHistory();

  const toHome = () => {
    history.set({ value: "/" });
  };
  const toAbout = () => {
    history.set({ value: "/about" });
  };

  return (
    <>
      <button onClick={toHome}>{'"/"'}</button>
      <button onClick={toAbout}>{'"/about"'}</button>

      <MemoryRouter
        history={history}
        root={(props) => <Suspense>{props.children}</Suspense>}
      >
        {/*... routes */}
      </MemoryRouter>
    </>
  );
}

In this example, a history object is pre-filled to navigate to the /about route, which is then passed to the MemoryRouter.

Manipulating the history

The MemoryHistory object contains the following methods, which you can use to control the navigation of your app.

• 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.
• 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.
• The listen method registers a callback to be called on navigation change.

MemoryHistory props

get

Type: get(): string

Returns the current route.

set

Type: set({ value: string, scroll?: boolean, replace?: boolean })

Default: false

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).

back

Type: back(): void

Navigates 1 step back in the history. Corresponds to go(-1).

forward

Type: forward(): void

Navigates 1 step forward in the history. Corresponds to go(1).

go

Type: go(n: number): void

Navigates n steps in the history. Negative for back, positive for forward. Clamped to history length.

listen

Type: listen(listener: (value: string) => void): () => void

Registers a listener that will be called on navigation.

MemoryRouter props

children

Type: JSX.Element | RouteDefinition | RouteDefinition[]

The route definitions.

root

Type: Component

Top level layout component.

base

Type: string

Base url to use for matching routes.

actionBase

Type: string

Default: "/_server"

Root url for server actions.

preload

Type: boolean

Default: true

Enables/disables preloads globally.

explicitLinks

Type: boolean

Default: false

truebles all anchors being intercepted and instead requires <A>.

history

Type: MemoryHistory

An optionally pre-filled and mutable history object which will store any navigation events.