这篇文章主要介绍“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;
当你进入页面时, 或者从返回到当前页面时, 页面的 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");
你可以利用 <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怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。