reactjs：如何以编程方式替换整个路由表

鉴于以下情况

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

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

let render=（）=>{
const routes=require（'./路由/索引'）。默认值（存储）
ReactDOM.render(
,
挂载节点
)
}
// ========================================================
//走！
// ========================================================
render（）

假设整个应用程序都是在了解所有路线和商店的情况下构建的

我想重建路线和商店编程后，应用程序正在运行

新的路由和商店将作为一个插件出现，我将通过编程方式将pluginbundle.js注入DOM。所以我不知道前方的路线或商店

我已经使用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()

let store=createStore1（）
让store2=createStore2（）
let routes=require（'./路由/索引'）。默认值（存储）
let routes2=require（'./routes2/index'）。默认值（store2）
让render=（）=>{
ReactDOM.render(
,
挂载节点
)
}
// ========================================================
//走！
// ========================================================
render（）

---

我想在运行时以编程方式切换到routes2和store2。

我正在手动加载与Angular2模块非常相似的预构建包，它们基本上是一个独立的迷你SPA。这些包中的路由事先是未知的，我需要一种方法将它们添加到主路由表中

@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作为我的状态管理方案。
我的解决方案是让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>
    )
    }
}

这就是一切被束缚的方式

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

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

从“/stores/router config store”导入routerConfigStore；
ReactDOM.render（（
)
，document.getElementById（'root'）；
registerServiceWorker（）；

---

因此，基本上现在我可以与routerConfigStore交互并随意更改路由表

我正在手动加载与Angular2模块非常相似的预构建包，它们基本上是一个独立的迷你SPA。这些包中的路由事先是未知的，我需要一种方法将它们添加到主路由表中

@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作为我的状态管理方案。
我的解决方案是让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>
    )
    }
}

这就是一切被束缚的方式

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

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

从“/stores/router config store”导入routerConfigStore；
ReactDOM.render（（
)
，document.getElementById（'root'）；
registerServiceWorker（）；

---

因此，基本上现在我可以与routerConfigStore交互并随意更改路由表

你不能使用

redux

来

dispatch

每次需要更改路由时，将它们发送到全局状态，然后从

AppContainer

中的状态获取它们吗？@puratio我想我已经按照你的建议做了。我使用MobX作为我的状态管理库，并将我的路径标记为可观察的。我更改路由，我的AppContainer刷新。可以随意动态添加和删除新路由。谢谢你应该将此作为答案发布并接受它，以便其他人看到你的问题已经解决，尤其是如果你自己解决了它。你不能使用

redux

来

在每次需要更改路由时将其分派到全局状态，然后从
AppContainer
中的状态获取路由吗？@puratio我想我已经按照你的建议做了。我使用MobX作为我的状态管理库，并将我的路径标记为可观察的。我更改路由，我的AppContainer刷新。可以随意动态添加和删除新路由。谢谢你应该把它作为一个答案发布并接受它，这样其他人就可以看到你的问题已经解决了，特别是如果你自己解决了的话。