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.

Properties

MemoryHistory

MemoryRouter