管理 React 应用程序的多个页面答案

【问题标题】：Managing Multiple Pages for React Application管理 React 应用程序的多个页面
【发布时间】：2016-05-19 06:45:06
【问题描述】：

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

现在我们正在为使用 reactjs 构建的应用程序构建一个 UI 组件。因此，我们构建了反应包（bundle.js），并在我们的烧瓶应用程序的页面中呈现它。这很好用。

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

我的问题是 - 我们如何在不损失性能或在更改屏幕时重新加载反应组件的情况下管理这些多个页面？对我们来说，flask 继续管理主要 URL 很重要。另外，我不介意如果反应屏幕没有 URL，只要我可以通过反应组件中的链接在屏幕之间遍历即可。

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

【问题讨论】：

标签： javascript python reactjs flask

【解决方案1】：

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

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

React-Router 会在您每次切换页面时清除状态，这就是为什么您需要使用 React 的状态/道具系统或（最好）通过像 Redux 这样的框架来保存应用程序的状态。

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

【讨论】：

【解决方案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 将您的组件链接在一起

【讨论】：