javascript - 在 URL 前缀下将 React 应用程序添加到 Flask

Question

我有一个 React 应用程序，我想将其驻留在 Flask 应用程序的特定 url 路由前缀上。

示例:

• host.com/ 是 Fl​​ask 应用程序的主页。它是 index.html 目录中的 templates 文件(此处使用标准 Flask 约定)。

• host.com/about 是 Fl​​ask 应用程序的另一个页面。它是同一 templates 目录中的其他文件。

• host.com/search 是 React 应用程序的根目录。我希望任何带有 /search 前缀的内容都可以引用 React 应用程序的某些部分。

• host.com/search/123 是 React 应用程序的某个页面(遵循上述逻辑)。我正在使用 react-router-dom 在 React 应用程序内进行路由。

我使用 npm run build 构建了 React 应用程序，然后尝试像 this example 中那样使用 Flask 只提供 React 应用程序。一切正常。

然后我尝试执行以下操作，将 React 放置在 Flask 应用程序的特定 url 前缀处:

# file app.py

import os
from flask import Flask, render_template
from .search_blueprint import search_blueprint

app = Flask(__name__)
app.register_blueprint(search_blueprint, url_prefix='/search')

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(use_reloader=True, port=5000, threaded=True)

这是 search_blueprint.py 文件的内容(与我 already mentioned 问题的答案非常相似:

# file search_blueprint.py

from flask import Blueprint, send_from_directory
import os

build_dir = os.path.abspath('./app/static/build')
search_blueprint = Blueprint('search', __name__, static_folder=build_dir)

# Serve React App
@search_blueprint.route('/', defaults={'path': ''})
@search_blueprint.route('/<path:path>')
def serve(path):
    if(path == ""):
        return send_from_directory(build_dir, 'index.html')
    else:
        if(os.path.exists(os.path.join(build_dir, path))):
            return send_from_directory(build_dir, path)
        else:
            return send_from_directory(build_dir, 'index.html')

当我转到 index.html 时，app.py 中引用的 Flask host.com/ 页面加载正常。当我转到 host.com/search 时，我得到一个空白屏幕(意味着 Flask 没有错误)。控制台中出现如下错误消息:

Loading failed for the <script> with source “http://host.com/static/js/main.ca656ef1.js”.

有人知道为什么我无法让这个 React 应用程序在指定的 url 前缀下工作吗？

这是与问题相关的目录布局:

app
├───static
│    └───build
├───templates
│    └───index.html
├───app.py
└───search_blueprint.py

编辑

添加 build 目录的内容:

build
│   asset-manifest.json
│   favicon.ico
│   index.html
│   manifest.json
│   service-worker.js
│
└───static
    ├───css
    │       main.d293ea0a.css
    │       main.d293ea0a.css.map
    │
    ├───js
    │       main.ca656ef1.js
    │       main.ca656ef1.js.map
    │
    └───media
            logo.5d5d9eef.svg

Answer 1

app = Flask(__name__, static_folder='app/static/build')

您必须在创建 Flask 应用程序时指定该静态目录。这让我发疯，所以我希望它能帮助你和其他人。

干杯