react-browser-router-store v1.0.4

react-browser-router-store

封装 react-router-dom v6
简单、强大的 react 路由工具

功能

1. 路由切换提供过渡或动画效果
2. 缓存路由组件
3. 可以给路由提供多个路径
4. 重定向
5. 高阶组件，对路由包装
6. 路由拆分，将路由组件拆成多个小组件
7. 路由切换前后，提供拦截功能
8. 动态路由，在当前路由表中添加路由
9. 路由仓库，每个路由拥有一个全局仓库

组件

1. Transition 过渡组件
2. ViewTransition 视图过渡组件
3. Keepalive 缓存组件
4. Show 管理promise的组件
5. ShowList Resolve 管理多个 promise 组件
6. ShowOrder 管理多个 Show 组件
7. Await 形式意义的 async 函数组件
8. defineAsyncComponent 定义异步组件

示例

import {createBrowserRouter, alias, transition, keepalive, wrapper} from "react-browser-router-store";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Index/>,
    meta: {
      [alias]: ["/index", "/main"],
      [transition]: {
        type: "transition",
      },
      [keepalive]: {
        include: () => true,
      },
      [wrapper]: [IndexWrapper]
    }
  }
]);

router.beforeEach(async (to, from, navigateGuard) => {
  if (to.pathname === "/foo") {
    navigateGuard.next("/")
  }
});

router.afterEach((to) => {
  const title = to.meta.title;
  if (typeof title === "string") {
    document.title = title;
  }
});

import {Await} from "react-browser-router-store";

function Foo() {
  return (
    <Await loading={<h1>loading...</h1>}>
      <Bar/>
    </Await>
  );
}

async function Bar() {
  const data = await new Promise(resolve => {
    setTimeout(() => {
      resolve("hello world");
    }, 1000);
  });
  return (
    <div>
      <h1>{data}</h1>
    </div>
  );
}

EOF