当前位置：首页 > news >正文

网站301做下百度信息流广告怎么投放

news 2025/7/20 21:53:44

网站301做下,百度信息流广告怎么投放,百度网络营销中心官网,vps网站搬家Github仓库背景产品希望可以像浏览器那样每打开一个路由，会多一个tab，用户可以切换tab访问之前加载过的页面，且不会重新加载。真就产品一句话…… Github上有轮子了吗 Github上开箱即用的轮子是基于react-router-dom V5实现的&#xff…

Github仓库

背景

产品希望可以像浏览器那样每打开一个路由，会多一个tab，用户可以切换tab访问之前加载过的页面，且不会重新加载。
真就产品一句话……

Github上有轮子了吗

Github上开箱即用的轮子是基于react-router-dom V5实现的，我看了一下issue作者表示不会支持V6版本。但是我的项目路由是V6版本的。
后来在Github上找到了另外一个项目是基于V6实现的，但是这是一个类似Demo的项目，没有提供API开箱即用的功能。

功能点

实现一个React版的keep-alive组件，被他包裹的组件会被缓存，下次再打开不需要重新走create生命周期
Tab组件
- 切换路由时新增一个tab，title从路由信息里面自动读取
- tab支持关闭，下次再进入相同的路由会重新加载
- 同时支持关闭所有tab（快捷操作，但是会保留当前tab）
实现activated、deactivated生命周期函数。
- 在Vue2（不知道Vue3是不是）的时候activated的生命周期在首次加载时不会触发，因为它不是从未激活切换到激活的状态。这会导致create 和 activated经常要写相同的代码。
- 我实现的activated则会在首次被激活时也会被调用，不知道算不算优化！
开箱即用的功能，不需要太多额外的配置。

安装

// 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 = () => {// 需要使用useOutletconst outlet = useOutlet();return (<KeepAliveScope><RouterTabs /><KeepAlive>{outlet}</KeepAlive></KeepAliveScope>);
};export default Layout;

路由定义需要增加name属性

// router.ts
// 也可以是createHashRouter
import Layout form './Layout'createBrowserRouter([{path: "/",element: <Layout />,loader: rootLoaderchildren: [{path: "events",element: <Event />,// 增加name属性，否则标签没有title，展示出现问题handle: { name: "事件" },}]}
]);

生命周期函数
- 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>;
};

其他API

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" />

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)
...