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中。所以我不知道前面的路线和门店。

我已经使用riotjs做到了这一点，在riotjs中，我可以交换出整个路由表，并动态添加和删除存储。我现在刚刚开始学习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模块，它们基本上是一个自包含的mini 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交互，并随意更改路由表。