用烧瓶后端反应路由器

Question

我正在构建一个项目，前端为 react，后端为flask。我希望由“create-react-app”创建的应用程序使用带有“react-router-dom”包的前端路由。index.js 中的相关代码：

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route component={Notfound} />
  </Switch>
</BrowserRouter>

然后我想通过flask提供它，所以在flask中我有以下设置和路由规则：

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

@app.route('/', defaults={'path': ''})
def serve(path):
    render_template("index.html")

其中 index.html 是用npm run build. 当我单击导航栏并重定向到 时/about，应用程序返回 404 not found。

浏览器控制台中还有另一个错误，显示： Manifest: Line: 1, column: 1, Unexpected token.

任何帮助表示赞赏。

Answer 1

查看本教程，了解如何为单页应用程序设置 Flask 后端的信息。index.html您需要一条包罗万象的路线来为“关于”页面提供服务：

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
  return render_template("index.html")

在教程链接中，您还可以找到有关在前端路由器上设置 404 页面的更多信息（描述的前端是 Vue，但概念是相同的）。