reactjs - 如何在loopback.js中处理客户端 react 路由

Question

我正在使用带有环回的 react 。我想将 react 代码集成到环回中。如果我执行这 3 个步骤

1)middleware.json - put this
 "files": {
    "loopback#static": {
      "params":"$!../client"
    }
  },`
2)root.js
 router.get('/');
3)front end code
 "build": "react-scripts build && cp -r build/* ../client/",

这确实在 localhost:3000 上打开了我的 react 站点。现在的问题是当我这样做时我无法访问 :3000/explorer 上的环回所以我的第一个问题是在这种情况下，如何访问资源管理器。

但后来我把它回滚了，因为我想再次使用环回浏览器。

所以，我删除了所有这些添加的代码，资源管理器又回来了但是当我再次添加它时现在，我看不到我的 react 代码

我仍然可以在http://localhost:3000/explorer/处看到资源管理器如果我去http://localhost:3000/apphome我看到 404 错误

现在，我的用于环回的 middleware.json 文件是

    {
  "initial:before": {
    "loopback#favicon": {}
  },
  "initial": {
    "compression": {},
    "cors": {
      "params": {
        "origin": true,
        "credentials": true,
        "maxAge": 86400
      }
    },
    "helmet#xssFilter": {},
    "helmet#frameguard": {
      "params": [
        "deny"
      ]
    },
    "helmet#hsts": {
      "params": {
        "maxAge": 0,
        "includeSubdomains": true
      }
    },
    "helmet#hidePoweredBy": {},
    "helmet#ieNoOpen": {},
    "helmet#noSniff": {},
    "helmet#noCache": {
      "enabled": false
    }
  },
  "session": {},
  "auth": {},
  "parse": {
    "body-parser#json": {},
    "body-parser#urlencoded": {
      "params": {
        "extended": true
      }
    }
  },
  "routes": {
    "loopback#rest": {
      "paths": [
        "${restApiRoot}"
      ]
    }
  },
  "files": {
    "loopback#static": {
      "params":"$!../client"
    }
  },
  "final": {
    "loopback#urlNotFound": {},
    "./LoopbackUrlNotFoundCatch.js": {}
  },
  "final:after": {
    "strong-error-handler": {}
  }
}

root.js 文件

'use strict';
//router.get('/', server.loopback.status());
module.exports = function(server) {
  // Install a `/` route that returns server status
  var router = server.loopback.Router();

  router.get('/');
  server.use(router);
};

-编辑

我做了一些改变。现在，我已经显示了 React 组件，当我使用 api 路由时我也可以看到数据。但是，探索者仍然失踪。

中间件.json

"files": {
    "loopback#static": [
      {
        "name": "publicPath",
      "paths": ["/"],
      "params": "$!../client"
      },
      {
        "name": "reactRouter",
      "paths": ["*"],
      "params": "$!../client/index.html",
      "optional":true
      }
    ]
  },

我还将 root.js 的名称更改为 root_something.js 。文档里是这样写的，不需要root.js

Answer 1

首先，您应该在其他主管中创建 react 应用程序，例如

根 ->
|-- 客户端//雇佣
|-- clint_src// react 应用程序

并获取构建 react 应用程序并将构建文件复制到客户端

现在你应该删除“server/boot/root.js”文件中的server.loopback.status()

示例:

router.get('/', server.loopback.status());

致:

module.exports = function(server) {
  // Install a `/` route that returns server status
  var router = server.loopback.Router();
  router.get('/');
  server.use(router);
};

之后你需要告诉环回中间件哪个文件应该加载到你的路径中转到 middlware /server/middleware.json 并将以下代码替换为 "files": {}

"files": {
    "loopback#static": [
      {
        "paths": ["/"],
        "params": "$!../client"
      },
      {
        "paths": ["*"],
        "params": "$!../client"
      }
    ]
  },

在“paths”:[“*”]上，所有路由都将打开react文件，除了“/api”和“explorer”，因此您应该处理在react应用程序内找不到页面

希望这对您有帮助祝你好运