solid?router?stack怎么使用

這篇文章主要介紹“solid router stack怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“solid router stack怎么使用”文章能幫助大家解決問題。

solid-router-stack

桌面端路由和移動端路由的區別

桌面端路由的特點是僅渲染當前匹配的路由, 而移動端路由的特點是頁面是一個棧, 歷史頁面會進行保留.

這款 solid-router-stack 就是使用這種機制, 它可以減少返回頁面后, 需要重繪制當前頁面的開銷. 并且可以監聽如果棧下的頁面回到前臺, 進行一系列的事件處理.

View DEMO

特性:

• 類似移動端導航, 保留頁面堆棧在DOM中

• 自動懶加載頁面

• 當你進入到指定頁面時, 輕松的預加載相關頁面

• 自動讀取 URL params 到頁面的 Props 中

快速開始

創建一個路由列表, 渲染到視圖中:

import { render } from "solid-js/web";
import { createRouter } from "solid-router-stack";
import Welcome from "./welcome";
export const routers = createRouter({
  Welcome: {
    render: Welcome,
    // not use lazy import
    async: true,
  },
  Login: {
    render: () => import("./sign/Login"),
    // preload other pages
    preload: ["User"],
  },
  User: {
    render: () => import("./user"),
  },
});
// page background inherit the parent background:
document.getElementById("root").style.background = "#fff";
render(
  () => <routers.Routers root={routers.Welcome} hash />,
  document.getElementById("root");
);

使用導航

剛剛創建的 routers 內包含了所有頁面的導航方法, 比起直接使用 URL, 它更容易維護, 其中入參對象會以 URL params 的形式傳遞到新頁面或返回的舊頁面.

import { routers } from "./routers";
function Welcome() {
  const handlePushProduct = () => {
    routers.user.push();
  };
  const handleReleaseProduct = () => {
    routers.user.replace({ id: "123" });
  };
  const handleClearToProduct = () => {
    routers.user.clearTo();
  };
  const handleGoBack = () => {
    routers.goBack();
  };
  return (
    <div>
      <div onClick={handlePushProduct}>push product</div>
      <div onClick={handleReleaseProduct}>release product</div>
      <div onClick={handleClearToProduct}>clear all stack and push product</div>
      <div onClick={handleGoBack}>go back</div>
    </div>
  );
}
export default Welcome;

使用 URL Params

當你進入頁面時, 或者從返回到當前頁面時, 頁面的 Props 對象會更新, 你可以直接使用它, 由于 Solid 的特性它會自動監聽變化.

不同于傳統頁面返回, stack頁面返回時, 它不會重新渲染. 所以我們需要更新 props 以決定我們是否有需要重繪的行為.

const handlePush = () => {
  routers.somePage.push({dog:"im push"});
};
const handleGoBack = () => {
  routers.goBack({dog:"im go back"});
};
// params in props
function App(p: {dog}) {
  return (
    <div>
      {p.dog}
    </div>
  );
}

頁面導航動畫

您可以設置多種頁面導航動畫

import { setNavigationAnimation } from "solid-router-stack";
// like application
setNavigationAnimation("moveTop");

不希望某個頁面持久在DOM中

你可以利用 <Show when={props.stackTop} /> 改變當前頁面的內容是否持久在 DOM 中

const Page: Component = (props) => {
  return (
    <Show when={props.stackTop}>
      <div>the page</div>
    </Show>
  );
};

導航事件監聽

添加監聽方法, 它會獲取 fromUrl 和 toUrl, 您可以通過返回一個新的 URL 來替換原本應該導航的 toUrl

import { routers } from "./routers";
routers.listen(({ fromUrl, toUrl, kind, index }) => {
  console.log(fromUrl, toUrl, kind, index); // /hello, /next, "push", 2
  return toUrl;
});

關于“solid router stack怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。