npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-route-cache

v1.6.1

Published

keep-alive cache for react router

Downloads

612

Readme

功能

  • 标签式路由组件缓存,开箱即用
  • 每一个新路由切换都会在页面内新增一个标签tab,缓存其路由组件,切换路由或者tab标签组件不会重新加载
  • 支持配置路由组件是否需要缓存
  • 支持 Activated 和 Deactivated 生命周期函数

Demo

CodeSandbox

安装

// npm
npm i react-route-cache -S
// pnpm
pnpm i react-route-cache -S
// yarn
yarn add react-route-cache

使用

给 Layout 组件的 outlet 加上 keep-alive

// Layout.tsx
import { KeepAlive, KeepAliveScope, RouterTabs } from 'react-route-cache';
import { useOutlet } from 'react-router-dom';

const Layout = () => {
  // 需要使用useOutlet
  const outlet = useOutlet();

  return (
    <KeepAliveScope>
      <RouterTabs />
      <KeepAlive>{outlet}</KeepAlive>
    </KeepAliveScope>
  );
};

export default Layout;

路由定义需要增加 name、cache 属性(cache不配置默认开启缓存)

// router.ts
// 也可以是createHashRouter
import Layout form './Layout'

createBrowserRouter([
    {
        path: "/",
        element: <Layout />,
        loader: rootLoader
        children: [
            {
                path: "events",
                element: <Event />,
                // 增加name属性,否则标签没有title,展示出现问题
                // 如果不需要缓存可以配置cache false, 不配置或者true都会开启缓存
                handle: { name: "事件", cache: false},
            }
         ]
      }
]);

生命周期函数

  • useActivated 返回的方法会在 Deactivated 的时候执行。
  • 第二个可选参数是一个依赖项数组,为了更新回调函数里的依赖,一般不会用到,功能类似 useCallback,依赖变化不会执行函数。
import { useActivated, useDeactivated } from 'react-route-cache';

export const Demo = () => {
  useActivated(() => {
    console.log('激活');
    return () => {
      console.log('activated返回的方法会在Deactivated的时候执行');
    };
  });

  useDeactivated(() => {
    console.log('离开组件');
  });

  return <div>123</div>;
};

KeepAliveScope Props

mode

  • 默认匹配路由 path,path 变化则会新增一个 tab,也就是如果查询参数变化不会新增一个 tab 缓存组件
  • 如果希望查询参数变化也会新增一个 tab 需要将 mode 改为 search

nameKey:如果路由 name 已被占用,可以通过该字段获取 handle 下其他字段的信息作为 tab 的 title

interface KeepAliveScopeProps {
  mode?: "path" | "search";
  nameKey?: string;
}
<KeepAliveScope mode="search" nameKey="tabName" />

RouterTabs & KeepAlive Props

RouterTabs

  • theme: 主题颜色,提供 light 和 dark 两种主题色,默认为light
  • size: 大小,提供 large middle 和 small 三种大小,默认为 middle

KeepAlive

  • exclude:排除不需要缓存的路由组件,支持正则表达式
  • include:只缓存需要缓存的路由组件,支持正则表达式
  • max:缓存的组件数量,默认 10
  • styles:自定义样式
styles:{
  wrapper?: CSSProperties; // 包裹元素的style
  content?: CSSProperties; // 内容元素的style
}

其他 API

close、closeAll、closeNavigator

  • close 方法用于关闭当前标签页
  • closeAll 用于关闭除了当前激活的 tab 所有的标签页
  • closeNavigator 是为了解决比如表单创建页,创建完之后需要跳转到其他路由。closeNavigator 会关闭当前创建页标签,然后跳转到指定路由。是 close()和 navigator(url)的语法糖。
import { useKeepAlive } from '../hooks/use-keep-alive';
...
  const { close, closeAll, closeNavigator } = useKeepAlive();
  close()
  closeAll()
  // 是close()和navigator方法跳转到其他路由
  closeNavigator(url)
...

开发 & 调试

// 构建
npm run build
// 构建后运行example调试
npm run start -w example
// 发布
npm publish