Flask部署React应用问题：刷新页面出现404错误

嘿，这个问题我太熟了！我当初用Flask搭React单页应用的时候也踩过这个坑😅。核心原因是React的路由和Flask的路由工作逻辑完全不一样：

• 当你在React应用里点击站内链接时，是React的客户端路由在浏览器本地处理跳转，根本不会给Flask服务器发新的请求，所以一切正常。
• 但刷新页面时，浏览器会直接向Flask服务器请求当前的URL（比如/users），而Flask的路由表中根本没有定义这个路径，自然就返回404错误了。

下面给你两种最常用的解决方案，按需选择：

方法一：让Flask兜底返回React的index.html（推荐） #

这个方法的思路是：把所有非API的请求都交给React处理，让Flask只负责API接口和返回React的入口文件。

步骤如下：

1. 先在你的React项目根目录执行npm run build，生成编译好的build文件夹，里面包含所有静态资源和index.html。
2. 调整Flask的代码：
   • 首先导入必要模块：from flask import Flask, render_template
   • 设置Flask的静态文件和模板路径指向React的build文件夹（路径根据你的项目结构调整，比如如果Flask代码在根目录，React的build在同级目录，就用下面的配置）：

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

   • 最后添加一个“兜底”路由，匹配所有未被API路由匹配的路径：

     # 先定义你的API路由，比如：
     @app.route('/api/data')
     def get_data():
         return {"message": "Hello from Flask API!"}
     
     # 兜底路由，必须放在所有API路由之后
     @app.route('/', defaults={'path': ''})
     @app.route('/<path:path>')
     def catch_all(path):
         return render_template("index.html")
     

   这样一来，不管用户刷新哪个React路由的页面，Flask都会返回index.html，然后由React的客户端路由去匹配对应的页面。

方法二：改用React的HashRouter（快速简单） #

如果你不想修改Flask的路由配置，也可以在React端换用HashRouter，它会把路由路径放在#后面（比如/#/users）。这样刷新页面时，浏览器只会请求根路径/，Flask返回index.html后，React会根据#后面的内容处理路由。

步骤如下：

1. 在React项目中导入HashRouter：

   import { HashRouter as Router, Route, Switch } from 'react-router-dom';
   

2. 把原来的BrowserRouter替换成HashRouter：

   function App() {
     return (
       <Router>
         <Switch>
           <Route exact path="/" component={Home} />
           <Route path="/users" component={Users} />
           <Route path="/contracts" component={Contracts} />
         </Switch>
       </Router>
     );
   }
   

   这个方法的缺点是URL里会多一个#，看起来不够美观胜在配置简单，适合快速解决问题。

最后提醒 #

• 用方法一的时候，一定要把Flask的API路由放在兜底路由的前面，不然API请求也会被转到index.html。
• 确保Flask能正确访问到React编译后的build文件夹，静态资源（比如CSS、JS）路径配置正确，不然页面会加载异常。

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