具有单页应用程序的真实 URL？

Posted 2023-02-24

【中文标题】具有单页应用程序的真实 URL？

【英文标题】：Real URLS with Single Page Applications?

【发布时间】：2016-10-09 17:24:28

【问题描述】：

我在我的一个项目中使用了 react 路由器，所以 react 是前端库，路由由 react 路由器管理，后端视图在 django 中，而 apis 在 django rest 中

所以我在浏览 react-router 文档时遇到了这个：-

配置您的服务器 您的服务器必须准备好处理真实的 URL。当应用程序第一次在 / 加载时，它可能会工作，但是当用户四处导航然后在 /accounts/23 处点击刷新时，您的 Web 服务器将收到对 /accounts/23 的请求。您将需要它来处理该 URL 并将您的 javascript 应用程序包含在响应中。**

我想知道这将如何与 django 视图一起使用。

【问题讨论】：

您好，这是一个相当主观的答案（这就是我添加评论而不是答案的原因）但是我相信除非您愿意硬着头皮创建一个完整的单页应用程序。由于您在 django 中有您提到的后端视图，因此我建议您仅对客户端路由使用散列路由。我在关于 redux 的帖子中写了一个相当广泛的意见：spapas.github.io/2016/03/02/react-redux-tutorial/#store-js（查看我对 HashHistory 与 BrowserHistory 的评论）

【参考方案1】：

在开发服务器上，您只需为不以api/ 或static/ 开头的所有内容设置路由，即可返回基本的app.html 文件。示例

class AppHTMLView(View):

    def get(self, request):
        fn = os.path.join(settings.BASE_DIR, "app", "app.html")
        with open(fn, 'r') as fh:
            return HttpResponse(fh.read())

在您的生产服务器上，您相应地配置 nginx。像这样的

...
location / 
    root /var/www/example.com/static_files/;
    try_files '' /app.html =404;

但这并不是 React 特有的，而是所有单页应用程序所共有的。

【讨论】：

是的，所有单页应用程序都应该通用，我将编辑问题标题，nginx 是我觉得最好的解决方案