reactjs：ルートテーブル全体をプログラムで置換する方法

Question

let render =() => { 
    const routes = require('./routes/index').default(store) 

    ReactDOM.render(
    <AppContainer store={store} routes={routes} />, 
    MOUNT_NODE 
) 
} 
// ======================================================== 
// Go! 
// ======================================================== 
render() 

アプリ全体がすべてのルートと店舗を知っていることを前提として動作します。

私はルートを再構築し、アプリケーションの実行後にプログラム的に保存したいと考えています。

プラグインbundle.jsをプログラムでDOMに注入することで、新しいルートとストアがプラグインとして導入されます。だから私は、ルートや店頭を知らない。

私はriotjを使用してこれを行いました。ここで私はルートテーブル全体をスワップアウトし、ストアを動的に追加および削除できます。私は今、react-reduxを学び始めており、私の研究に焦点を当てる場所についてのヒントを期待しています。

より簡潔な例

let store = createStore1() 
let store2 = createStore2() 
let routes = require('./routes/index').default(store) 
let routes2 = require('./routes2/index').default(store2) 

let render =() => {  
    ReactDOM.render(
    <AppContainer store={store} routes={routes} />, 
    MOUNT_NODE 
) 
} 
// ======================================================== 
// Go! 
// ======================================================== 
render() 

私は、プログラム実行時にroutes2とstore2に切り替えたいです。

Answer 1

私はAngular2モジュールによく似た、あらかじめ組み込まれたバンドルを手動でロードしています。このバンドルは、基本的にはミニSPA内蔵型です。それらのバンドルのルートは前には分かっていないので、それらをメインルートテーブルに追加する方法が必要でした。

私は自分の状態管理体系としてMobXを使用しています。
私の解決策は、React.Componentをルートテーブルのオブザーバにすることでした。

@observer 
class AppRouterContainer extends React.Component { 
    render() { 
     const {routes} = this.props; 
     return ( 
     <HashRouter> 
     {/* kick it all off with the root route */} 
     {renderRoutes(routes)} 
     </HashRouter> 
    ) 
    } 
} 

私は、ルートテーブルを管理し、ルートを観測可能とマークするMobXストアを持っています。

class RouterConfigStore { 
    @mobx.observable routes = [{}]; 
} 

このようにすべてがバインドされます。

import routerConfigStore from './stores/router-config-store'; 
ReactDOM.render(( 
    <div> 
    <DevTool /> 
    <AppRouterContainer routes={routerConfigStore.routes}></AppRouterContainer> 

    </div> 
) 
, document.getElementById('root')); 
registerServiceWorker(); 

これで基本的にrouterConfigStoreと対話してルートテーブルを変更できます。