Ant Design Pro 中 Day.js 在路由配置中的日期问题解析

问题背景

在 Ant Design Pro 项目中，开发者经常需要在路由配置中使用动态日期参数。一个典型的使用场景是在路由路径中包含当前日期，例如 /dashboard/2024-01-20。然而，当开发者尝试在 config/routes.ts 文件中直接使用 Day.js 或类似日期库时，会遇到一个棘手的问题：部署后日期不会自动更新。

问题现象

具体表现为：

1. 应用部署当天，路由中的日期显示正确
2. 第二天及之后访问应用，路由中的日期仍然显示部署当天的日期
3. 尝试修改时区设置、使用 UTC 时间或更换日期库均无法解决问题

技术原理分析

这个问题本质上与前端应用的构建和部署机制有关：

1. 构建时静态化：config/routes.ts 中的代码在构建时被执行并固化，生成的日期是构建时的静态值
2. 运行时不变性：构建产物中的路由配置不会在运行时重新计算
3. 客户端与服务端差异：即使在服务端设置了正确的时区，构建时的静态值也不会自动更新

解决方案

经过深入研究和实践验证，我们找到了以下可靠的解决方案：

1. 动态路由参数方案

将路由配置改为接受参数的形式：

// config/routes.ts
{
  path: '/dashboard/:date',
  component: './Dashboard',
}

2. 运行时动态设置日期

在应用主文件 (src/app.tsx) 中，使用 React 的生命周期方法动态设置日期：

// src/app.tsx
import { useEffect } from 'react';
import dayjs from 'dayjs';
import { history } from 'umi';

export function useQiankunStateForSlave() {
  useEffect(() => {
    const currentDate = dayjs().format('YYYY-MM-DD');
    if (!history.location.pathname.includes(currentDate)) {
      history.replace(`/dashboard/${currentDate}`);
    }
  }, []);
}

3. 布局组件中处理

也可以在布局组件中进行日期处理：

// layouts/index.tsx
import { useEffect } from 'react';
import dayjs from 'dayjs';
import { useLocation, useHistory } from 'umi';

const BasicLayout = (props) => {
  const location = useLocation();
  const history = useHistory();
  
  useEffect(() => {
    const currentDate = dayjs().format('YYYY-MM-DD');
    if (!location.pathname.includes(currentDate)) {
      history.replace(`/dashboard/${currentDate}`);
    }
  }, [location.pathname]);

  return props.children;
};

最佳实践建议

1. 避免在构建时配置中使用动态日期：任何在构建配置文件中使用的日期函数都会在构建时被固化
2. 优先使用路由参数：设计路由时考虑使用参数而非硬编码的日期值
3. 考虑用户时区：即使服务器时区正确，也应考虑客户端时区差异
4. 缓存策略：合理设置缓存控制头，避免浏览器缓存旧的路由

总结

在 Ant Design Pro 项目中处理动态日期路由时，关键在于理解前端应用的构建和运行机制。通过在运行时而非构建时处理日期逻辑，可以确保日期值的实时性和准确性。这种解决方案不仅适用于 Day.js，也适用于其他日期处理库，为开发者提供了灵活可靠的日期路由处理方案。