MemoryRouter

MemoryRouter 可用于在内部内存中保持整个路由历史记录的路由。 其他路由器将历史记录保存在外部，比如 <HashRouter> 将历史记录保存在 URL 中，或者像 <Router> 将历史记录保存在浏览器历史记录中。

当你想要完全控制路由历史记录时，将历史记录保存在内存中是很有用的。 由于 MemoryRouter 可以操作 MemoryHistory，它经常用于测试目的。

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>}
      >
        {/*... 路由配置 */}
      </MemoryRouter>
    </>
  );
}

在这个例子中，一个预填充的历史对象被用来导航到 /about 路由，然后传递给 MemoryRouter。

操作历史记录

MemoryHistory 对象包含以下方法，你可以用它们来控制应用程序的导航。

• get 方法以字符串形式获取当前路由，而 set 方法导航到新路由，允许可选参数如替换当前历史记录条目或滚动到 DOM 元素 id。
• back 和 forward 方法分别模拟浏览器的后退和前进按钮，而 go 方法在历史记录中导航特定步数，可以向后或向前。
• listen 方法注册一个在导航变化时调用的回调函数。

属性

MemoryHistory

| 方法 | 签名 | 描述 | | --------- |
------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ | | get | get(): string | 返回当前路由。 | | set | set({ value: string, scroll?: boolean, replace?: boolean }) | 导航到新路由。value: 要导航到的 URL。scroll: 滚动到元素 ID（默认：false）。replace: 替换当前历史记录条目（默认：false）。 | | back | back(): void | 在历史记录中后退 1 步。相当于 go(-1)。 | | forward | forward(): void | 在历史记录中前进 1 步。相当于 go(1)。 | | go | go(n: number): void | 在历史记录中导航 n 步。负数表示后退，正数表示前进。受限于历史记录长度。 | | listen | listen(listener: (value: string) => void): () => void | 注册一个在导航时将被调用的监听器。 |

MemoryRouter