Antd Pro - 带参数的动态路由配置

Question

我的 antd pro 应用程序上的参数路由有一个棘手的问题。

我的路由器配置如下

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' },

问题： 在生产版本中，我无法通过 URL

/board/100

获取页面（100 是 ID）。 单击页面上

/board/100

标签上带有

<a>

的链接时，我会看到正确的页面。

但是当将此网址直接放在浏览器上时，我收到错误

Cannot GET /task-board/100

。

这很奇怪。在开发环境中，一切正常，但在生产版本中不起作用。

我的 antd pro 设置在

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"
}

我对Antd pro有很好的经验，完成了几个项目，但自己解决不了。

任何帮助或建议将不胜感激。

感谢您的关注。

Answer 1

原因是 Apache 服务器没有为带有参数 (/board/:id) 的路由指定 URL。

所以我可以通过在生产构建根文件夹中添加

.htaccess

文件来解决问题。

CRA部署指南

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

.htaccess

文件应如下所示：

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

Answer 2

{ 路径：'/web-c-pass/fairs/add-cpass/:id', 组件：'./Web-cPass/TableListAddCPassInFair'， }, 我希望它能帮助你