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做了这个，我可以换掉整个路由表并动态添加和删除存储。我刚刚开始学习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交互并随意更改路由表。

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

1 个答案: