如何将create-react-app集成至现有Python/Flask应用？求代码示例

没问题！我来给你详细拆解这两个方案，附上可直接复用的代码示例，帮你快速把React应用集成到现有Flask项目里。

你的Flask项目已经有现成的导航栏、侧边栏，所以我们可以基于现有基础模板，创建一个专门的页面模板，在其中预留React的挂载DOM节点，同时引入React打包后的静态资源。

1. 现有基础模板示例（templates/base.html） #

假设你的项目已经有包含导航栏、侧边栏的基础模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Flask + React 集成{% endblock %}</title>
    <!-- 现有项目全局CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
    <!-- 现有导航栏 -->
    <nav class="navbar">
        <a href="/">首页</a>
        <a href="/react-page">React嵌入页</a>
        <!-- 其他导航项 -->
    </nav>
    
    <div class="layout">
        <!-- 现有侧边栏 -->
        <aside class="sidebar">
            <ul>
                <li>菜单1</li>
                <li>菜单2</li>
            </ul>
        </aside>
        
        <!-- 页面内容区域，留给子模板填充 -->
        <main class="content">
            {% block content %}{% endblock %}
        </main>
    </div>

    <!-- 现有项目全局JS -->
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    {% block scripts %}{% endblock %}
</body>
</html>

2. 创建React专用页面模板（templates/react_integration.html） #

继承基础模板，添加React挂载容器，并预留静态资源引入位置：

{% extends "base.html" %}

{% block title %}React 嵌入页面{% endblock %}

{% block content %}
    <!-- React挂载容器：React应用会渲染到这个div节点中 -->
    <div id="react-root" class="react-container"></div>
{% endblock %}

{% block scripts %}
    <!-- 引入React打包后的JS文件（后续会说明如何生成和放置） -->
    <script src="{{ url_for('static', filename='react-app/static/js/main.xxxx.js') }}"></script>
    <!-- 引入React打包后的CSS文件 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='react-app/static/css/main.xxxx.css') }}">
{% endblock %}

3. Flask路由配置（app.py） #

添加路由指向这个React嵌入页面：

from flask import Flask, render_template

app = Flask(__name__)

# 现有项目其他路由...

# React嵌入页面的路由
@app.route('/react-page')
def react_page():
    return render_template('react_integration.html')

if __name__ == '__main__':
    app.run(debug=True)

正如你提到的，只要能在HTML中添加脚本标签、挂载DOM，且能托管JS/CSS文件，就能部署React应用。下面是具体实现步骤：

1. 打包React应用 #

在你的create-react-app项目根目录下，运行打包命令：

npm run build

执行完成后会生成build文件夹，结构大致如下：

build/
├── static/
│   ├── css/
│   │   └── main.[哈希值].css
│   └── js/
│       └── main.[哈希值].js
└── index.html

2. 迁移静态资源到Flask项目 #

把build/static文件夹整个复制到Flask项目的static目录下，并重命名为react-app（方便和现有静态资源区分），最终Flask项目结构如下：

your-flask-project/
├── app.py
├── static/
│   ├── css/
│   ├── js/
│   └── react-app/  <!-- React打包后的静态资源 -->
│       ├── css/
│       └── js/
└── templates/
    ├── base.html
    └── react_integration.html

3. 优化：自动托管React静态资源（可选） #

如果不想每次打包都手动复制文件，可以配置Flask直接指向React的build目录作为静态资源目录，修改app.py：

from flask import Flask, render_template, send_from_directory
import os

app = Flask(__name__)

# 配置React build目录的绝对路径
REACT_BUILD_DIR = os.path.join(os.path.dirname(__file__), '../your-react-app/build')

# 现有路由...

@app.route('/react-page')
def react_page():
    return render_template('react_integration.html')

# 托管React的静态资源
@app.route('/react-static/<path:path>')
def serve_react_static(path):
    return send_from_directory(os.path.join(REACT_BUILD_DIR, 'static'), path)

对应的模板资源路径修改为：

<script src="{{ url_for('serve_react_static', path='js/main.xxxx.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('serve_react_static', path='css/main.xxxx.css') }}">

额外注意事项 #

• 建议在React项目的package.json中设置"homepage": "/react-page"，这样打包后的资源路径会自动适配Flask的路由，避免路径错误。
• 开发阶段可以同时启动Flask和React开发服务器，在React的package.json中添加"proxy": "http://localhost:5000"，实现接口请求的跨域转发。

内容的提问来源于stack exchange，提问作者helen8297