如何在React前端项目中使用Flask实现后端路由配置

你当前Page1无法访问的核心原因有两个：

1. 原生<a>标签跳转触发浏览器向Flask发起整页请求，而Flask仅配置了根路径/的返回规则，访问/page1时无对应路由会返回404
2. 尚未配置React前端路由，无法根据路径匹配渲染对应页面组件

第一步：配置React前端路由 #

• 安装React路由依赖

npm install react-router-dom

• 修改App.js，配置路径与页面的匹配规则

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Page1 from './pages/Page1';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

• 修改Navbar.js，用路由专属Link组件替换原生a标签，避免触发整页刷新请求

import { Link } from 'react-router-dom';

const Navbar = () => {
    return (
        <>
            <Link to='/'>Home</Link>
            <Link to='/page1'>Page 1</Link>
        </>
    )
};

export default Navbar;

第二步：配置Flask路由适配SPA场景 #

你是用Flask托管React单页应用，所有前端路由都需要统一 fallback 到index.html，让前端接管路由逻辑，修改app.py如下：

from flask import Flask, render_template

# 明确指定模板文件夹和静态资源路径为上层的public目录
app = Flask(__name__, 
            template_folder='../public', 
            static_folder='../public',
            static_url_path='')

# 通配符路由，匹配所有访问路径
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def index(path):
    return render_template('index.html')

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

配置说明：

• 初始化参数解决了你之前写死相对路径调用render_template的兼容性问题
• 通配符路由会匹配所有访问路径，统一返回index.html，React路由会自动识别当前路径渲染对应组件
• 如果你需要新增后端接口，只要把接口路由写在通配符路由之前即可，Flask会优先匹配更精确的路由规则

开发阶段可选方案 #

如果你习惯前后端分离开发，React启动在3000端口，Flask启动在5000端口：

1. 在React项目的package.json中新增配置项 "proxy": "http://127.0.0.1:5000"
2. 前端开发时直接走React自带的开发服务器，路由由React Router接管，接口请求会自动转发到Flask后端，不需要修改Flask路由配置也能正常跳转

内容的提问来源于stack exchange，提问作者one-hand-octopus