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

给出以下内容;reactjs：如何以编程方式替换整个路由表

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

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

与假设整个应用程序内置知道所有的路线和商店工作。

我想在应用程序运行后重建路线并以编程方式存储。

新的路由和商店作为一个插件进来，我将通过以插件方式注入一个插件bundle.js以编程方式引入。所以我不知道前面的路线或商店。

我已经完成了这个使用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和商店2。

来源

2017-08-24 Herb Stahl

你不能使用'redux'将''dispatch'路由转换成全局状态，每次需要改变它们，然后从'AppContainer'中的状态获取它们？ – Purgatory

@实验室我想我做了你的建议。我使用MobX作为我的状态管理库并将我的路由标记为可观察对象。我改变了路线，我的AppContainer刷新了。新路线可以随意动态添加和删除。谢谢 –

你应该发布这个答案并接受它，以便其他人可以看到你的问题已经解决，特别是如果你自己解决它。 – Purgatory

我手动加载的预构建捆绑看起来非常类似于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交互并随意更改路由表。

来源

2017-09-08 13:55:22

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

回答

相关问题