【React Router】v6 data router 在非组件（或工具方法）中如何优雅的跳转路由
上集回顾如果你还在 v5 ？那么恭喜你：【React Router v5】在非组件（或工具方法）中如何优雅的跳转路由 在 data router 中如何优雅的跳转路由？因为 router 对象返回了 navigate 方法，所以可以直接调用. // history.js export const routes: ReturnType<typeof createBrowserRouter> = createBrowserRouter([ { path: '/', element: <Home />, }, { path: '/login', element: <div>login</div>, }, ]); ...
【CSS】解决外边距重叠（重合）引起的 margin 垂直方向（top、bottom）不生效，无作用的问题
随着各种 UI 库的使用，像这种问题在业务中可能都很少接触，但是仍需了解其现象和解决方案。 一键直达 相邻兄弟元素的外边距重叠 父级与子级的外边距重叠 空块级元素的外边距重叠 什么是外边距重叠 —— Margin Collapsing 当块级元素（Block）的上下外边距与其相邻或嵌套的块级元素外边距重叠时，外边距会合并为一个外边距，而不是相加。这种行为成为外边距重叠。（浮动和绝对定位的元素不会发生外边距重叠） 外边距重叠只会发生在块级元素（Block）上，例如 div、p、section 等。 外边距重叠计算规则示例元素 <div class="css-fix-margin-item-parent"> <div class="css-fix-margin-item-child">child di...
【CSS】CSS-Nesting：CSS 嵌套写法 —— 有望替代 less sass 的原生嵌套
现在 CSS 也有了嵌套写法，“不再需要” less sass 等预处理器，原生 CSS 就可以实现嵌套写法，可以减少代码量，提高代码可读性，让 CSS 更加优雅~哦，没人写 css 了是吧 QAQ CSS-Nesting 从 Chrmoe 112 开始，原生 CSS 就可以支持嵌套语法了（你不会还是旧版本吧？？？？） 语法 MDN 示例 /* Without nesting selector */ parent { /* parent styles */ child { /* child of parent styles */ } } /* With nesting selector */ parent { /* parent styl...
docker（docker desktop）中设置国内镜像源加速（阿里云、中科大），以及代理和容器代理设置，解决桌面端无法登陆就退出问题
Version: Docker -v => 26.0.0 Docker Desktop => 4.29.0 设置国内镜像加速创建或修改 /etc/docker/daemon.json 文件 $ vi /etc/docker/daemon.json { "registry-mirrors": ["http://hub-mirror.c.163.com", "https://docker.mirrors.ustc.edu.cn"] } # 重启 $ systemctl restart docker.service 国内镜像源 官方 CN 镜像：https://registry.docker-cn.com 中国科技大：https://docker.mirrors.u...
解决从 docker desktop 内镜像 linux 创建的容器，启动就停止、无法启动等问题（无进程容器）
小白向，好几年没操作了，纯坤了~~~ Version: Docker -v => 26.0.0 Docker Desktop => 4.29.0 结论快进到结论。 容器必须有个前台进程，如果没有前台进程执行，容器认为空闲，就会自行退出。 解决方法自己手动创建并携带以下参数 run 时增加 -it docker run -it -d python:3.9 run 时增加 sleep infinity docker run -d python:3.9 sleep infinity docker desktop 案例 由上分析，桌面端的 docker 由官方镜像直接创建的容器命令没有保活且无运行进程，例如 linux [{"url":"https://static....
eslint 9.x 升级或使用指南，eslint.config.js 配置，包含 react、typescript、prettier 等常用配置升级迁移
前言距离 9.0 版本发布已经两个多月了，主流框架或者工具基本都已经适配，一起来体验新版本吧~ Breaking Changes简单列举大家可能会遇到的 change，详情查看官方 release note 不再支持 Node v19.x 和 LTS18.18.0 版本名词解释： LTS：Long-Term Support 是 Node 的长期支持版本（维护和安全更新），通常每隔两年发布一次，特点是稳定和可靠性，建议生产使用。 非 LTS（current）：是 Node 的最新开发版本，通常每隔几个月发布一次，包含最新的功能和实验特性，缺乏稳定性。 Flat 配置文件取代 eslintrc 配置新版 eslint.config.{js,cjs,mjs} 已经取代了 .eslintrc 配置文件，如果你是“怀旧...
在 github actions 中获取时间，并转换为中国标准时间（中国时区）
使用 GITHUB.ENV 存储时间变量建议将时间变量存入至 GITHUB.ENV 中，方便后续 step 中使用 - name: set time run: | TIME="$(TZ='Asia/Shanghai' date +'%Y-%m-%d %H:%M:%S')" echo "TIME=$TIME" >> $GITHUB_ENV TZ='Asia/Shanghai' 为 中8 时区，可选时区： 哈尔滨 （ Asia/Harbin） 长白时区GMT+8:30上海（Asia/Shanghai） 中原标准时区 GMT+8重庆（Asia/Chongqing） 陇蜀时区GMT+7乌鲁木齐（Asia/Urumqi） 新藏时区...
【Node】Corepack - 解决 pnpm 或 yarn 的多版本管理、解决本地版本与 packageManager 中的版本一致性问题
解决 pnpm 版本与 package.json 中 packageManager 中的版本不一致安装项目依赖遇到： ERR_PNPM_BAD_PM_VERSION This project is configured to use v8.15.6 of pnpm. Your current pnpm is v9.1.3？你可以在项目 .npmrc 中这样配置 package-manager-strict=false 当然这只是临时解决方案，特意将此方案前置，若你需要更进一步的了解 corepack 可继续往下~ Corepack https://nodejs.org/api/corepack.html 这是个实验性工具文档，请优先查看官方文档，以获得最新信息！ 文档日期版本： Node.js =...
在 node 中快速代理请求（Proxy），解决跨域或请求转发问题 - http-proxy-middleware 修改请求体和返回
我是标题代理转发除了 Nginx，大家（前端）可能接触比较多的是 webpack 中的 devServer（webpack-dev-server）。若你 webpack 的 proxy 使用较多的话，那？那别看了~。 原生 http 模块使用快速开箱。所有路径都会转发至 localhost:8001，changeOrigin 为 true 时，会将请求头中的 host 更改为 target url。 const http = require('node:http'); const { createProxyMiddleware } = require('http-proxy-middleware'); const server = http.createServer( createP...
解决 npm、cnpm 或 pnpm install 遇到 certificate has expired （证书已过期）
书接上回~ 前言由于种种原因，大家在使用 npm 或其他包管理工具时，都会更换其默认镜像源，例如：taobao 来提高效率。虽然早在 2022年 时淘宝发布了更换镜像地址的公告，直至 2024/01/22 SSL 证书过期前服务都是可用的。 由于 npm 默认开启了 ssl 验证，你可以选择关闭该项服务（不推荐，仅建议使用内部源时）或者更换正确的镜像源。 方案更换镜像源（推荐） 更多方法点击链接查看 > > > npm查询源npm get registry 设置源# 国内 淘宝 镜像源 npm config set registry https://registry.npmmirror.com/ # 官方镜像源 npm config set registry https...
最新文章
