为React应用程序管理多个页面

Question

我们有基于flask / python的应用程序，关于应用程序的所有内容都由flask管理（包括用户会话，URL等）。

现在我们正在为使用reactjs构建的应用程序构建一个UI组件。因此，我们构建react bundle（bundle.js），并在我们的flask应用程序中的页面内呈现它。这很有效。

我们的问题是这个 - 我们的反应应用程序的下一个版本有多个屏幕。并且用户通常在流程中从一个屏幕转到下一个屏幕，并且有时可能想要直接访问特定屏幕。

我的问题是 - 我们如何在不丢失性能的情况下管理这些多个页面，或者在更换屏幕时重新加载react组件？烧瓶继续管理主要URL对我们来说很重要。此外，我不介意反应屏幕是否没有URL，只要我可以通过反应组件内的链接在屏幕之间穿越。

我试图在下图中显示我们应用的结构：

Answer 1

我自己没有尝试在一个Flask应用程序中嵌入React，但是对于React应用程序使用react-router可能是值得的。

您可以继续使用Flask来管理网址。在这种情况下，Flask将返回您的React应用程序，但React应用程序路由本身将由React-Router管理。

每次切换页面时，React-Router都会擦除状态清理，这就是你需要通过使用React的state / props系统或（最好）通过像Redux这样的框架来保存应用程序状态的原因。 / p>

这似乎是最简单的方法。我已经从头开始在React中构建了一些多页Web应用程序，根据我的经验，它不应该花费那么多时间来实现它。

Answer 2

正如@PiggyBoy所说，您应该看看客户端路由，例如React-Router，并且还将应用程序的当前状态保存在Redux，Flux或其他任何位置。

如何在Flask应用程序中执行此操作，以及我对大多数Flask / React项目的处理方式如下：

from flask import render_template, make_response
from mysite import app

@app.route('/path-to-react-app/', defaults={ 'path': '' })
@app.route('/path-to-react-app/<path:path>/')
@login_required # if needed
def react_app(path):
    response = make_response(render_template(
        'react_app.html',
        path=path
    )
    response.set_cookie('your_cookie_if_needed', token_if_needed)

    return response

在您的React应用程序中，您将拥有类似的内容：

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link, browserHistory } from 'react-router'

render((
    <Router history={browserHistory}>
        <Route path='/path-to-react-app' component={App}>
            <Route path='some-page' component={PageComponent} />
        </Route>
    </Router>
), document.getElementById('root'));

然后您可以使用react-router的Link将组件链接在一起