Flask 和 React 路由

IT技术 python reactjs flask url-routing
2021-04-06 11:40:20

我正在使用 React 构建 Flask 应用程序,但最终遇到了路由问题。

后端负责作为一个 API,因此一些路由看起来像:

@app.route('/api/v1/do-something/', methods=["GET"])
def do_something():
    return something()

以及通往 React 的主要路线:

@app.route('/')
def index():
    return render_template('index.html')

在 React 应用程序中使用react-router,一切正常,react-router 带我去/something并获得渲染视图,但是当我刷新页面时,/somethingFlask 应用程序会处理这个调用,我得到Not Found错误。

最好的解决方案是什么?我在想重定向这是不是要求所有的呼叫/api/v1/.../它的效果并不理想,因为我将回到我的应用程序,而不是渲染的主页阵营视图。

4个回答

为此,我们使用了全能 URL

from flask import Flask
app = Flask(__name__)

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    return 'You want path: %s' % path

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

您还可以加倍努力并重用Flask routing系统以匹配path与客户端相同的路由,这样您就可以将客户端需要的数据作为 JSON 嵌入 HTML 响应中。

@shangyeshen 在全面覆盖之前注册 API 路由,以便它们具有优先权。
2021-05-25 11:40:20
在某处有一个完整的例子吗?这里的代码没有像上面的例子那样做任何索引渲染,我一直无法以一种有效的方式将两者结合起来。
2021-05-29 11:40:20
这是我使用了一段时间的解决方案,直到我需要使用React.lazy. React.lazy想要从pathflask正在使用而不是静态目录中获取捆绑部分对此有何想法?
2021-05-31 11:40:20
如果所有路由都将被定向为捕获所有功能,那么当我从前端执行 ajax 请求调用时,您将如何分离后端 api 路由和反应路由?
2021-06-02 11:40:20
找到了。我无法@app.route('/<path:path>')匹配任何东西,直到我找出记录不佳的 Flask 参数。设定static_url_path=""不好。我结束了static_url_path="/public", static_folder="../public"然后我返回一个 static:return app.send_static_file("index.html")带有硬编码的"/public/..."url。另外,看看:reddit.com/r/reactjs/comments/42pn95/reactrouter_and_flask_404 (不是我)。
2021-06-17 11:40:20

也许作为之前答案的延伸。这为我解决了问题:

from flask import send_from_directory

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve(path):
     path_dir = os.path.abspath("../build") #path react build
     if path != "" and os.path.exists(os.path.join(path_dir, path)):
         return send_from_directory(os.path.join(path_dir), path)
     else:
         return send_from_directory(os.path.join(path_dir),'index.html')
你不能用一个普通的 path_dir 替换空的 os.path.join(path_dir) 吗?
2021-06-07 11:40:20

出于某种原因,包罗万象的 URL 对我不起作用。我发现使用 Flask 404 处理程序会产生完全相同的结果。它看到 url 并将其传递给您的路由器将处理它的地方。

@app.errorhandler(404)   
def not_found(e):   
  return app.send_static_file('index.html')
这很好用!感谢分享!
2021-06-12 11:40:20

只是为了通知句柄错误 404 和 render_template 非常适合我。

@app.errorhandler(404)
def not_found(e):
    return render_template("index.html")