Question

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

示例：

host.com/是Flask应用的主页。它是index.html目录中的templates文件（此处使用标准的Flask约定）。
host.com/about是Flask应用的另一个页面。它是同一templates目录中的其他文件。
host.com/search是React应用的根。我想要/search前缀的任何内容来引用React应用程序的某些部分。
host.com/search/123是React应用程序的某个页面（遵循上述逻辑）。我正在使用react-router-dom在React app中进行路由。

我使用npm run build构建了React应用程序，然后在this example中尝试使用Flask提供React应用程序。一切都很好。

然后我尝试以下方法将React放在Flask app的特定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中引用的Flask app.py页面在我转到host.com/时加载正常。当我转到host.com/search时，我得到一个空白屏幕（意味着Flask没有错误）。在控制台中出现如下错误消息：

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

任何人都知道为什么我无法让这个React应用程序以指定的网址前缀工作？

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

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应用程序时必须指定该静态目录。这让我发疯，所以希望对您和其他人有帮助。

欢呼

在网址前缀

修改

1 个答案: