时间戳

首页 > 解决方案 > 在 ReactJS 中的路由器更改上保持组件 DOM

reactjs - 在 ReactJS 中的路由器更改上保持组件 DOM

问题描述

我正在开发一个 ReactJS 应用程序。我的页面中有三个选项卡（view1、view2、view3），我正在使用 react-router 创建三个路由。

我有这样的路由器代码：

class App extends React.Component {
    render() {
        return (
            <div>
                <ViewBar/>
            </div>
        );
     }
}

ReactDOM.render(
    return (
    <Router history={hashHistory}>
        <Route path="/" component={Home}>
            <Route path="view1" component={View1} />
            <Route path="view2" component={View2} />
            <Route path="view3" component={View3} />
        </Route>
    </Router>
), document.getElementById('app')
);

假设我们打开View1，View1的组件渲染，然后打开View2，View2渲染的组件又变回View1。问题是当我改回 View1 时，即使数据没有更改，View1 的所有组件也会再次呈现。我希望路由的 DOM 元素在不同路由之间更改的第一次渲染后保持不变。我阅读了许多类似问题的解决方案，但这些解决方案是保留 UI 数据而不是 DOM 元素。

标签： reactjsreact-router

解决方案

react-router根据路径更改重新渲染每个视图。

如果你想要跨视图持久化数据，你最好的解决方案是使用持久化数据存储解决方案，例如redux、flux、mobx等...

如果您只想手动处理，您可以将数据存储在父组件上，并将 setter 和 getter 作为道具传递给子视图。

...但是，请了解使用 react 时，您使用的是虚拟 DOM，而不是实际浏览器上的 DOM。对 DOM 元素持续存在的期望取决于您如何编写应用程序以处理状态更改。

推荐阅读