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

Question

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

那么...当我使用特定路由时，如何将strapi重定向到打开公共目录？

例如将/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)，并说我想将我的 react 应用安装在 /dashboard 路径下。

文件结构为：

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

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

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

1. 将你构建的 react 应用程序移动到后端项目的子文件夹 /dashboard，通过修改 yarn build 脚​​本，我正在这样做，在复制/粘贴我的代码之前要小心，有一个 rm -rf cmd。

// 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",
    ...
  }
}

1. 在 Strapi 中添加一个自定义中间件作为您的“视图路由器”，它将处理对/dashboard/* 的所有请求，以便为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}`)
        );
      });
    }
  };
};

4. 启用<strapiapp>/config/custom.json中的自定义中间件

{
  "myCustomConfiguration": "This configuration is accessible through strapi.config.myCustomConfiguration",
  "viewRouter": { // use the middleware name
    "enabled": true
  }
}

并访问http://localhost:1337/dashboard，您将看到反应页面。