一款移动优先的Solid.js路由solid router stack使用详解

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");
);

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;

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");

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

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