將React應用程序集成到Flask應用程序

Question

我有一個現有的Flask應用程序，包含一個靜態部分（網頁）和一個動態部分（登錄後）。我需要做的是將動態部分重寫爲將使用現有API的React應用程序。

到目前爲止，我一直在構建完全分離的React應用程序，我不知道如何從Flask部分過渡到React部分。理想情況下，我不想僅在模板中包含React/React-DOM腳本並編寫組件，我想爲Flask應用程序的當前動態部分編寫單頁應用程序（使用create-react-app）。

轉換實際發生的任何想法？也許當@ app.route（/ dynamic-part）被激發，然後寫一些東西而不是渲染一個模板？

編輯：因爲有些用戶認爲我的問題不是很清楚，我會盡力在這是以防其他人絆倒更精確：

這個問題我問的是如何從切換Flask處理它是React路由的一部分，它處理它是路由的一部分，而不會互相影響。所以，就像下面的答案一樣，我將React應用程序的構建輸出放在Flask和Flask的路徑中，指向所有應該由React應用程序處理到React構建輸出的index.html的路線。這工作。希望現在更清楚一點。如果沒有，我會再次嘗試更多細節。

Answer 1

看起來像create-react-app的指令是：building for relative paths。所以你可以照常開發React應用程序。

然後，當你準備好後，你'npm run build'創建一個構建文件夾，其中包含單頁面應用程序所需的所有資源（html，捆綁的javascript，css等）。您可以使用其餘模板將整個文件夾複製到目錄中。然後你的@ app.route（/ dynamic-part）可以指向./app/templates/build/index.html。