2017-09-23 467 views
2

我使用React + Redux创建了SPA,其中使用了react-route。 我面临的一个问题是,每当我切换像/ about,/ contact,/ list时,我的路线。每次组件卸载React路由器组件在路由更改时卸载

所以,我需要知道这是一种预期的行为,或者我做错了什么。因为在某个组件中,我正在调用ajax来获取数据,如果组件被卸载并且用户又回来了......即使数据已经存在,它也会再次发出ajax调用。

<Route path="/" component={App}> 
    <IndexRoute component={HomePage} /> 
    <Route path="about" component={About} /> 
    <Route path="/" component={HomePage} /> 
</Route> 
+1

“这是一个预期的行为”。是。如果更改路由,则当前路由组件将卸载并挂载新路由组件。 –

+0

有什么办法可以制止这一点。其实我不需要每次卸载组件。由于不必要的ajax命中。 也是这种正确的方法来停止卸载组件? –

回答

0

每次你浏览到旧的组件被移除的路线时,新的组件被加载并获取与存储值填充(与终极版的连接)。

数据将始终在商店中可用,因此您不需要在组件卸载并重新加载时启动新的Ajax请求。

而且,如果您仍然希望组件始终可用,那么您可以使用单个路径并使用导航菜单或选项卡显示和隐藏主组件的组件。但取决于组件的数量, DOM可能会相当沉重。

+0

我完全同意你所说的,但我的问题是我正在使ajax(从componentWillMount或componentDidMount)调用从组件自己获取数据,并且如果一个组件将被卸载并重新安装,它的生命周期方法将被解雇。 –

+0

您可以将其保留在componentDidMount中,但添加一个条件以便不派遣loadAll操作,前提是数据已经加载完毕。所以它只会在组件第一次安装时加载 –