Question

所以我从Flask提供index.html文件。 index.html文件来自使用以下内容的构建项目：https://github.com/facebookincubator/create-react-app

我在React应用程序中设置了几个路由，例如： “/用户” 和“/ contract”

当我刷新其中一条路线时，我从烧瓶中获得了404，但是当点击网站上找到的链接时，它们的工作完全正常。

Answer 1

当您单击界面中的链接时，React将重新呈现页面而不进行任何服务器端干预，然后在URL栏中更新路径。但是，在加载时，您正在向服务器直接发出该路由请求，而Flask没有注册该路由。

最简单的方法是在装饰器中为服务主页视图的功能注册这些路线

@app.route('/')
@app.route('/users')
@app.route('/contracts')
def home_page():

如果路线很多，您可能需要使用catch-all URL pattern。

Answer 2

指定每条路线太容易出错。这是一个更通用的解决方案。

添加一个错误处理程序来捕获 404：

@app.errorhandler(404)
def handle_404(e):
    if request.method == 'GET':
        return redirect(f'/?request_path={quote_plus(request.path)}')
    return e

错误处理程序将重定向到您的 React 工作的主页，将实际请求的 request_path 作为参数传递。

在您的视图处理程序中执行以下操作：

@app.route('/')
def public_page_index(request_path=None):
    return render_template('index.html', 
        request_path=request.args.get('request_path', ''))

index.html 模板将创建一个隐藏的输入：

<input type="hidden" name="request_path" value="{{request_path}}">

然后实际的 React 路径将可供您的 React 代码响应。这是我在我的主页组件中使用 jquery 和 useHistory() 所做的。

useEffect(() => {
    // find if server refresh needs history
    const $request_path = $('input[name=request_path]');
    const val = $request_path.val();
    if (val) {
        $request_path.val("");
        history.push(val);
        return;
    }
}, []);

Flask，服务于React应用程序：无法刷新“页面”

2 个答案: