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>

然后我想通过烧瓶提供服务，因此在烧瓶中，我具有以下设置和路由规则：

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。

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

感谢您的帮助。

Answer 1

最好将路由最多留给一方-python（在您的情况下为烧瓶）或做出反应。其他注释中建议的从烧瓶应用程序进行的catch_all路由仅应用于开发目的，因为通常反应应用程序只是可以与通用http服务器一起使用的静态Web应用程序（如生产中的nginx或apache）。如果在生产中使用烧瓶的catch_all替代方案，那么最终将浪费资源，因为可以直接从http服务器处理同一请求，而不是从wsgi服务器收集响应。就像A，B和C在讲话，A要呼叫C，他可以直接呼叫C，但是他没有这样做，而是要求B呼叫C，C回复了B，然后B将回复转发给了A。完全没有必要资源使用情况。此外，如果您开始/尝试混合两个烧瓶的路径并做出反应，将会变得非常混乱。用一个。

Answer 2

查看this tutorial，以获取有关如何为单页应用程序设置Flask后端的信息。您需要使用全部路由来为“关于”页面投放index.html：

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

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

与烧瓶后端反应路由器

2 个答案: