如何在loopback.js中处理客户端react路由
我正在使用react with loopback。我想在loopback中集成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上打开我的react站点:3000 .Now的问题是，当我这样做的时候，我无法访问我在3000/ explorer上的回送，所以我的第一个问题是在这种情况下，如何访问explorer。
但后来我回滚了它，因为我想再次使用loopback explorer。
因此，我删除了所有这些添加的代码，资源管理器回来了，但当我现在再次添加它时，我看不到我的react代码
如果我转到http://localhost:3000/apphome，我仍然可以在http://localhost:3000/explorer/上看到资源管理器，我看到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);
};-edit
我做了一些改变。现在，我有了react组件，当我使用api路由时，我还可以看到数据。但是，explorer仍然下落不明。
middleware.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
回答 3
Stack Overflow用户
发布于 2018-11-07 02:14:54
首先，您应该在其他控制器中创建react应用程序，如
根->
|-- client // emply
|-- clint_src // react app
以及获取构建react应用程序并将构建文件复制到客户端
现在，您应该删除“服务器/ server.loopback.status() /root.js”文件中的引导
示例：
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);
};之后，您需要回送中间件，在您路径中加载哪个文件，转到中间件/server/middleware.json，并将blow代码替换到"files": {}
"files": {
"loopback#static": [
{
"paths": ["/"],
"params": "$!../client"
},
{
"paths": ["*"],
"params": "$!../client"
}
]
},在"paths": ["*"],上，所有路由都将打开react文件，不包括"/api“和"explorer”，因此您应该在react应用程序内处理页面未找到
希望这能帮上忙，祝你好运
Stack Overflow用户
发布于 2017-12-23 16:01:53
我怀疑React的默认服务工作者会拦截并尝试缓存/explorer。它会跳过以__为前缀的urls，因此这可能会解决清除browser：
在component-config.json中：
{ "loopback-component-explorer": {
"mountPath": "/__explorer" }}然后通过/__explorer访问资源管理器。
Stack Overflow用户
发布于 2018-03-18 20:18:16
按照将图形用户界面添加到回送应用程序状态的说明，您需要完全删除root.js '/‘路由，方法是将root.js文件重命名为不带.js扩展名的名称，或者完全删除该文件。
$ rm root.js
### or, you can do this
$ mv root.js root.js.old在loopback 3服务器配置中，必须将客户端文件夹设置为middleware.json中的中间件路由，如下所示：
"files": {
"loopback#static": {
"params": "$!../client"
}
},现在，您的客户机应用程序是从/client文件夹提供的，默认情况下，静态文件由Express提供--因此，当您点击localhost:3000/时，它将查找index.html
https://stackoverflow.com/questions/47946850
复制
腾讯云开发者
