🧐 Day.js on the routes.ts file doesn't work as expected

[decki-id]

🧐 问题描述 | Problem description

I use day.js on the routes.ts file to put the current date on the URL. On the server, I deploy the app on a Docker container. The day.js shows the expected current date when the app is deployed. But the next day, the app still showed the date when the app was deployed. For example, I have deployed the app on 2024-01-20. When I open the app from the browser on 2024-01-21 or even today (2024-01-25), the date on the URL is still 2024-01-20.

What have I tried to solve the problem? Since the default date setting on the Docker container is UTC, I have tried changing the dayjs().format("YYYY-MM-DD") on the /config/routes.ts file to dayjs().utc().format("YYYY-MM-DD") or dayjs.utc().format("YYYY-MM-DD"). I have also tried changing the hash on the /config/config.ts file from false to true, while history on the same file is still { type: 'hash' }, which shows that I'm using hash on the URL. I have even tried changing the dayjs to momentjs altogether. All that did nothing to the problem.

💻 示例代码 | Sample code

/config/config.ts

/config/routes.ts

🚑 其他信息 | Other information

OS: CentOS Linux 7 (Core) x86_64

Node: 20.10.0

浏览器 | browser: Google Chrome

[chenshuai2144]

值得注意是的百分之二十的问题都可以用重装依赖来解决，所以你可以尝试一下： 删除 'node_modules' 文件夹 -> 删除 'package-lock.json'或 'pnpm-lock.yaml' 文件 -> 运行 'pnpm install' 或 'npm install' 命令

问题描述：在routes.ts文件中使用Day.js将当前日期放到URL中，但是在应用程序部署后，Day.js显示的当前日期不符合预期。当我在服务器上部署应用程序时，Day.js显示了正确的当前日期。但是第二天，应用程序仍然显示了部署应用程序时的日期。例如，我在2024-01-20部署了应用程序。当我在2024-01-21或者今天（2024-01-25）从浏览器打开应用程序时，URL上的日期仍然是2024-01-20。

解决方案：

1. 检查服务器的时区设置是否正确。如果时区设置不正确，Day.js可能会显示错误的日期。确保时区设置与您所在的地区/时区相匹配。
2. 将Day.js更改为使用UTC时间。在/routes.ts文件中，将dayjs().format("YYYY-MM-DD")更改为dayjs().utc().format("YYYY-MM-DD")。这将强制Day.js使用UTC时间，而不是服务器的本地时间。
3. 确保在部署应用程序之前，您已正确配置Day.js。确保您已正确安装Day.js并在项目中导入它。您可以使用npm或yarn来安装Day.js，并在/routes.ts文件中使用import dayjs from 'dayjs'来导入它。
4. 如果问题仍然存在，尝试使用其他日期处理库，如Moment.js来替代Day.js。有时，不同的库在处理时间和日期方面可能会有不同的行为。
5. 检查浏览器缓存。如果浏览器缓存了之前的URL，可能会导致URL上的日期不会更新。您可以尝试在浏览器中清除缓存或使用无缓存模式打开应用程序。

希望这些解决方案可以帮助您解决问题！

[decki-id]

@chenshuai2144

1. I have another project built with another template, used momentjs for the date, and deployed it on the same server. The date on the URL shows as expected. Therefore, I assume the server's time zone has already been set correctly.
2. Yes, as described above, I have tried using dayjs().utc().format("YYYY-MM-DD").
3. Yes, I have installed and imported the package correctly. It has been tested on the local.
4. Yes, I have tried changing the dayjs package to momentjs altogether, but it does nothing to the problem.
5. I checked the browser's DevTools. There is no cache stored. I have also tried adding add_header Cache-Control "no-store"; to the Nginx configuration. It also does nothing to the problem. I'll try to change it to no-cache and check it again tomorrow, but it would be nice if there is any other approach that I can try to solve this problem.

Thank you!

[decki-id]

After spending days researching this issue with my team, it turns out that on the config/routes.ts file, any date class/function like new Date() or module like dayjs() won't work as expected and would only work on the day the app is deployed on the server.

To solve this issue, I have to update the parameter on the path like /dashboard/:date using dayjs() inside the useEffect() and inside the layout() on the src/app.tsx file. This approach was found by my Front End team with GitHub username dnil2202.

I hope this issue history will help others later. Thank you!