如何为 Back4App 单页应用程序路由 URL？

Question

我刚刚启动了我的第一个 Back4App 应用程序。此应用程序是带有 React Router 的 React 应用程序。为了让它工作，我做了一个 npm run build 并上传了 'public' 文件夹下的所有文件（在云代码中找到）。

现在一切就绪，我可以进入索引页面，即https://[myapp].b4a.app，一切正常。但是当我转到一个子页面并进行刷新时，我偶然发现了一个 403 - {"error":"unauthorized"} 错误。

我知道发生这种情况是因为用户试图前往我的应用未提供服务的地方。通常我会把 Nginx 或类似的东西放在中间；这样我就可以捕获这些请求并将它们重定向到 SPA。

但是现在，由于我根本无法控制后端，我该如何进行这项工作？

Answer 1

Back4App 使用 Node.js 网络应用程序框架 Express 作为后端。幸运的是，我们可以自己添加一个路由文件。只需转到您的云代码部分并在云文件夹中添加一个 app.js 文件：

Routing & Single Page Application FAQ 状态：

To configure the routing to your SPA in Express, you should use the GET HTTP method to include an HTML file and in the response, we are going to deliver the index.html file to the browser.

这意味着您将所有可能的 GET 请求路由到您的 index.html，Back4App 保留路径除外（例如 'login' 和 'logout'）。还可以从文档中找到工作的基本文件：

const path = require('path');
const unRoutedPaths = ['apps','batch','requestPasswordReset','files', 'login','logout','user','users','Roles','parse','schemas','functions','classes','aggregate','cloud_code','config','hooks','push_audiences','installations','push','sessions','events','jobs','export_progress','export_data'];

app.use((req, res, next) => {
    const pathParts = req.path.split('/').filter((p) => p !== '');
    if (req.path.indexOf('.') > 0 || unRoutedPaths.includes(pathParts[0])) {
        next();
    } else {
        res.sendFile(path.join(`${__dirname}/public/index.html`));
    }
});

如何为 Back4App 单页应用程序路由 URL？

How to route URLS for a Back4App single page app?

routes

single-page-application

back4app