複数のページを反応アプリケーションとして管理する

Question

フラスコ/パイソンベースのアプリケーションがあり、アプリケーションに関するすべてがフラスコ（ユーザーセッション、URLなどを含む）によって管理されます。

ここでは、reactjを使用して構築されたアプリケーション用の1つのUIコンポーネントを作成しています。そこで、反応バンドル（bundle.js）を作成し、フラスコアプリケーションのページの内側にレンダリングします。これはうまくいく。

問題は次のとおりです。リアクションアプリの次のバージョンには複数の画面があります。そして、ユーザは一般に、フローの中である画面から次の画面に移動し、特定の画面に直接アクセスしたい場合があります。

私の質問は次のとおりです。 - パフォーマンスを低下させることなく、または画面を変更している間に反応コンポーネントを再ロードしなくても、これらの複数のページをどのように管理するのですか？フラスコが主なURLを管理し続けることは重要です。また、反応コンポーネント内のリンクを介して画面間を移動できる限り、反応画面にURLがないかどうかは気にしません。

私は、次の図に我々のアプリの構造を示すように試みた

：

Answer 1

私はフラスコアプリケーション内で自分自身に反応埋め込むしようとしていないが、react-routerを使用する価値があるかもしれませんReactアプリのために。

Flaskを使用してURLを管理し続けることができます。この場合、FlaskはReactアプリケーションを返しますが、Reactアプリケーションのルーティング自体はReact-Routerによって管理されます。

React-Routerは、ページを切り替えるたびに状態を消去します。そのため、アプリケーションの状態をReactの状態/小道具システムまたは（好ましくは）Reduxのようなフレームワークで保存する必要があります。

これは最も簡単な方法です。私は最初からReactでいくつかの複数ページのWebアプリケーションを構築しましたが、私の経験からすると、これを実装するのに時間がかかりません。

Answer 2

@PiggyBoyによると、React-Routerのようなクライアント側のルーティングを見て、Redux、Fluxなどのアプリの現在の状態を保持しているはずです。あなたが/と私は私のフラスコのほとんどのために行っているか、あなたのフラスコのアプリでそれを行うプロジェクトを反応できる方法

は次のとおりです。

：あなたのようなものを持っています

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 

そして、あなたの中 アプリに反応します

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')); 

そして、あなたはそれから反応し、ルータのLinkを

をあなたのコンポーネントを一緒にリンクするために使用することができます