Antd Pro - Dynamic routing configuration with a parameter

Question

I have a tricky issue with parameter routing on my antd pro application.

My router configuration is following in routes.ts.

export default [
...
{
    path: '/board',
    name: 'Board',
    icon: 'DragOutlined',
    routes: [
      {
        path: '/board/:id',
        name: 'Board detail',
        icon: 'GroupOutlined',
        hideInMenu: true,
        component: './Board',
      },
    ],
  },
...

{
    path: '/',
    redirect: '/welcome',
},

{ component: './404' },

Problem: In the production build, I can't get the page by URL /board/100 (100 is ID). When clicking on the link with /board/100 on <a> tag on the page, I see the correct page.

But when putting this URL directly on browser, I got the error Cannot GET /task-board/100.

It's very weird. In the development env, everything works correctly, but it doesn't work in the production build.

My antd pro setting in package.json:

"dependencies": {
    "@ant-design/compatible": "^1.1.0",
    "@ant-design/icons": "^4.7.0",
    "@ant-design/pro-card": "^1.19.0",
    "@ant-design/pro-descriptions": "^1.10.0",
    "@ant-design/pro-form": "^1.64.0",
    "@ant-design/pro-layout": "^6.35.0",
    "@ant-design/pro-table": "^2.71.0",
    "@lexical/react": "^0.3.6",
    "@tinymce/tinymce-react": "^4.1.0",
    "@umijs/route-utils": "^2.0.0",
    "antd": "^4.19.0",
    ...
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-helmet-async": "^1.2.0",
    "react-markdown": "^8.0.3",
    "umi": "^3.5.0"
}

I have good experience in Antd pro and completed several projects, but can't solve it myself.

Any help or advice will be appreciated.

Thanks for your attention.

Answer 1

The reason is that the Apache server doesn't route the URL for a route with parameter (/board/:id).

So I could solve the problem by adding .htaccess file in the production build root folder.

CRA Deployment guide

https://create-react-app.dev/docs/deployment/

.htaccess file should look like the following:

    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

Answer 2

{ path: '/web-c-pass/fairs/add-cpass/:id', component: './Web-cPass/TableListAddCPassInFair', }, i hope it will help u