🏂🏽 solid-router-stack

查看中文文档

A solid router, mobile first.

View DEMO

Features:

- Like navigation, page is keep in dom
- Auto lazy load pages
- Easy preload some pages when entry a page
- Auto use URL params input page's props
- Tiny, only 3kb in gzip

Example

Create routers

``tsx
import { render } from "solid-js/web";
import { createRouters, stackOptions } from "solid-router-stack";
import Welcome from "./welcome";

export const routers = createRouters({
Welcome: {
render: Welcome,
// not use lazy import
sync: true,
},
Login: {
render: () => import("./sign/Login"),
// preload other pages
preload: ["User"],
},
User: {
render: () => import("./user"),
},
});

// Set page background:
stackOptions.className = "bg-gray-800";

render(
() => ,
document.getElementById("root");
);

`

Use Navigaion

`tsx
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 (


export default Welcome;
`

Use params

When sub page back, you can do something:

`tsx
import { createPropsSignal } from "solid-router-stack";

// params.dog in props
function App(props: { dog: string; age: number }) {
const [dog, setDog] = createPropsSignal(props, "dog");
return (


props.stackShow is when stack page is stack top, you can use change Not keep page:

`tsx
const Page: Component = (props) => {
return (



routers.xxxx.put is push a new page or move old page to top

`tsx
routers.user.put(); // push a new page or move old page to top
routers.user.put({}, true); // ignore animation
`

Animation navigation, like application

`tsx
import { setNavigationAnimation } from "solid-router-stack";

// like application
setNavigationAnimation("moveTop");
`

ignoreAnimation in once:

`tsx
// routers.xxx.push(params?:Record, ignoreAnimation?:boolean)
routers.user.push({}, true);

// routers.goBack(params?:Record, ignoreAnimation?:boolean)
routers.goBack({}, true);
`

Events listen

When use history change:

`tsx
import { historyProxy } from "solid-router-stack";

historyProxy.beforeChange((url, path) => {
if (path === "/user") {
return "/login";
}
return url;
});
`

Use virtual history

Use virtual history in iOS Wechat application, history stack only one.

`tsx
export function isIOSWechat(): boolean {
const ua = navigator.userAgent.toLocaleLowerCase();
return new RegExp("(iphone|ipod|ipad)").test(ua) && new RegExp("(micromessenger)").test(ua);
}

render(
() => ,
document.getElementById("root");
);
``