Strapi 自定义路由重定向到 public 目录

Question

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

所以...当我使用特定路由时，如何重定向 strapi 以打开 public 目录？

例如重定向 /posts 到 public 目录？

Answer 1

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

静态文件的服务方式如下。 https://github.com/strapi/strapi/blob/master/packages/strapi/lib/middlewares/public/index.js 它使用 public 中间件。

因此您必须按照本文档创建自己的中间件。 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，在前端的 package.json 添加一个 homepage 属性，这将告诉 Webpack 添加一个前缀到你的静态资产，例如

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

通过修改yarn build脚本，将你构建的react应用程序移动到后端项目的子文件夹/dashboard，我是这样做的，在copy/paste我的代码之前要小心，有一个 rm -rf 命令。

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

在 Strapi 中添加自定义中间件作为您的 "view router"，它将处理对 /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}`)
        );
      });
    }
  };
};

在<strapiapp>/config/custom.json

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

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

Strapi 自定义路由重定向到 public 目录

Strapi custom routes to redirect to public directory

javascript

redirect

reactjs

react-router

strapi