Question

我将我的react应用程序部署到了trapi中的/public目录中，一切正常，但是，当我刷新页面时，stradi覆盖了我的react-router溃败。

那么...当我使用特定的溃败路线时，如何重定向trapdi以打开公共目录？

例如将/posts重定向到公共目录？

Answer 1

Strapi /public文件夹在这里用于服务器公共资产，而不用于托管前端应用程序。这样做不是一个好习惯。在回答您的问题之前，我必须先写下来。

这是静态文件的提供方式。 https://github.com/strapi/strapi/blob/master/packages/strapi/lib/middlewares/public/index.js 它使用公共中间件。

因此，您将必须按照本文档创建自己的中间件。 https://strapi.io/documentation/3.x.x/advanced/middlewares.html#custom-middlewares

因此，在./middelwares/custom/index.js中添加以下代码：

const path = require('path');

module.exports = strapi => {
  return {
    initialize: function(cb) {
      strapi.router.route({
        method: 'GET',
        path: '/post',
        handler: [
          async (ctx, next) => {
            ctx.url = path.basename(`${ctx.url}/index.html`);

            await next();
          },
          strapi.koaMiddlewares.static(strapi.config.middleware.settings.public.path || strapi.config.paths.static, {
            maxage: strapi.config.middleware.settings.public.maxAge,
            defer: true
          })
        ]
      });

      cb();
    }
  };
};

然后，您将必须启用中间件。您将必须使用以下代码更新./config/custom.json文件

{
  "myCustomConfiguration": "This configuration is accessible through strapi.config.myCustomConfiguration",
  "custom": {
    "enabled": true
  }
}

就是这样！

Answer 2

我在构建时构建了Strapi和CRA（create-react-app），并说我想在/dashboard路径下安装我的react应用。

，文件结构为：

yourapp/
└── apps/
    ├── frontend (react app)
    └── backend (strapi)

如果您使用的是CRA，请在前端的homepage中添加一个package.json属性，这将告诉Webpack为您的静态资产添加前缀，例如

// in frontend's package.json
{
  ...
  "homepage": "/dashboard"
}

通过修改/dashboard脚本，将您构建的react应用程序移动到后端项目的子文件夹yarn build中，我正在这样做，请小心复制/粘贴我的代码，其中有一个{ {1}} cmd。

rm -rf

在Strapi中添加自定义中间件作为您的“查看路由器”，它将处理对// package.json in root path { ... "scripts": { "build": "yarn build:front && yarn build:back && rm -rf apps/backend/dashboard && mv apps/frontend/build apps/backend/dashboard", ... } }的所有请求，以服务/dashboard/*下的react应用程序资产

在apps/backend/dashboard下创建文件

<strapiapp>/middlewares/viewRouter/index.js

启用const path = require("path"); const koaStatic = require("koa-static"); const fs = require("fs"); module.exports = strapi => { return { async initialize() { const { maxAge } = strapi.config.middleware.settings.public; const basename = "/dashboard"; const dashboardDir = path.resolve(strapi.dir, "dashboard"); // Serve dashboard assets. strapi.router.get( `${basename}/*`, async (ctx, next) => { ctx.url = ctx.url.replace(/^\/dashboard/, ""); if (!ctx.url) ctx.url = basename; await next(); }, koaStatic(dashboardDir, { index: "index.html", maxage: maxAge, defer: false }) ); const validRoutes = [ "/dashboard", "/subpath1", "/subpath2" ]; // server dashboard assets and all routers strapi.router.get(`${basename}*`, ctx => { const routePath = ctx.url.split("?")[0]; let fileName = ctx.url; if (validRoutes.includes(routePath)) fileName = "index.html"; ctx.type = "html"; ctx.body = fs.createReadStream( path.join(dashboardDir + `/${fileName}`) ); }); } }; };中的自定义中间件

<strapiapp>/config/custom.json

并访问{ "myCustomConfiguration": "This configuration is accessible through strapi.config.myCustomConfiguration", "viewRouter": { // use the middleware name "enabled": true } }，您将看到反应页面。

Strapi自定义路由重定向到公共目录

2 个答案: