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

Question

在我的antd应用程序中，参数路由有一个棘手的问题。

我的路由器配置是在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>链接时，我会看到正确的页面。

但是当将这个URL直接放到浏览器上时，我得到了错误的Cannot GET /task-board/100。

太奇怪了。在开发环境中，一切都正常工作，但在生产构建中却不起作用。

我在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和完成了几个项目，但无法解决它自己。

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

感谢您的关注。

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]