Search code examples
reactjsdockerantdant-design-pro

Ant Design Pro - Day.js on the routes.ts file doesn't work as expected


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

/config/config.ts

...

export default defineConfig({
...
hash: true,
history: { type: 'hash' },
...
});

/config/routes.ts

...

export default [
  { path: '/master', component: './master', menuRender: false, },
  {
    name: 'dashboard', icon: 'dashboard', path: '/dashboard',
    routes: [
      {
        path: '/dashboard',
        redirect: `/dashboard/${dayjs().format('YYYY-MM-DD')}`,
      },
      { path: '/dashboard/:date', component: './dashboard', },
    ],
  },
  RecapRoutes,
  AnalysisRoutes,
  DetailRoutes,
  {
    path: '/',
    redirect: `/dashboard/${dayjs().format('YYYY-MM-DD')}`,
  },
  ...
];

Other information:
OS: CentOS Linux 7 (Core) x86_64
NodeJS version: 20.10.0
Browser: Google Chrome


Solution

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

    I hope this question history will help others who also use the Ant Design Pro template.