ReactJS中路由切换时持久化组件DOM的实现方案

Hey there! 针对你在React路由切换时想要持久化组件DOM的需求，我有几个实用的方案可以分享给你：

这是专门为React Router打造的路由缓存库，能轻松实现组件DOM和状态的持久化，上手非常简单。

步骤： #

• 首先安装依赖：

npm install react-router-cache-route --save
# 或者用yarn
yarn add react-router-cache-route

• 修改你的路由配置，把原有的<Route>替换成<CacheRoute>即可：

import CacheRoute from 'react-router-cache-route';
// 记得引入View3组件
import View3 from './View3';

ReactDOM.render(
  (
    <Router history={hashHistory}>
      <Route path="/" component={Home}>
        <CacheRoute path="view1" component={View1} />
        <CacheRoute path="view2" component={View2} />
        <CacheRoute path="view3" component={View3} />
      </Route>
    </Router>
  )
);

这个库会自动帮你缓存组件的DOM结构和内部状态，切换路由时组件不会被卸载，只是被隐藏起来。你还可以通过when属性控制缓存时机、cacheKey自定义缓存标识，甚至手动清除指定缓存，灵活性很高。

如果不想引入第三方依赖，你可以自己写一个简单的缓存组件，核心思路是通过隐藏组件（而非卸载）来保留DOM和状态。

实现KeepAlive组件： #

class KeepAlive extends React.Component {
  state = {
    cachedComponents: {}
  };

  render() {
    const { children, match } = this.props;
    const componentKey = match.path;

    // 当前路由匹配时，渲染组件并缓存
    if (match.isExact) {
      this.setState(prevState => ({
        cachedComponents: {
          ...prevState.cachedComponents,
          [componentKey]: React.cloneElement(children)
        }
      }));
      return children;
    } else {
      // 路由不匹配时，渲染缓存的组件但隐藏它
      return this.state.cachedComponents[componentKey] ? (
        <div style={{ display: 'none' }}>
          {this.state.cachedComponents[componentKey]}
        </div>
      ) : null;
    }
  }
}

在路由中使用： #

ReactDOM.render(
  (
    <Router history={hashHistory}>
      <Route path="/" component={Home}>
        <Route path="view1">
          <KeepAlive>
            <View1 />
          </KeepAlive>
        </Route>
        <Route path="view2">
          <KeepAlive>
            <View2 />
          </KeepAlive>
        </Route>
        <Route path="view3">
          <KeepAlive>
            <View3 />
          </KeepAlive>
        </Route>
      </Route>
    </Router>
  )
);

这个方案的好处是完全可控，你可以根据需求调整缓存逻辑，比如添加缓存清理机制来避免内存占用过高。

如果你的标签页数量不多，也可以把所有视图组件都渲染在父组件中，通过CSS的display属性控制显示和隐藏，这样组件从始至终都不会被卸载，自然就能保留DOM和状态。

修改Home组件： #

class Home extends React.Component {
  state = {
    // 默认激活第一个标签页
    activeView: this.props.location.pathname.slice(1) || 'view1'
  };

  // 监听路由变化，更新激活的标签页
  componentDidUpdate(prevProps) {
    if (prevProps.location.pathname !== this.props.location.pathname) {
      this.setState({
        activeView: this.props.location.pathname.slice(1)
      });
    }
  }

  render() {
    const { activeView } = this.state;
    return (
      <div>
        <ViewBar />
        {/* 渲染所有视图，只显示当前激活的 */}
        <div style={{ display: activeView === 'view1' ? 'block' : 'none' }}>
          <View1 />
        </div>
        <div style={{ display: activeView === 'view2' ? 'block' : 'none' }}>
          <View2 />
        </div>
        <div style={{ display: activeView === 'view3' ? 'block' : 'none' }}>
          <View3 />
        </div>
      </div>
    );
  }
}

简化路由配置： #

ReactDOM.render(
  (
    <Router history={hashHistory}>
      <Route path="/" component={Home}>
        <Route path="view1" />
        <Route path="view2" />
        <Route path="view3" />
      </Route>
    </Router>
  )
);

这个方案最轻量化，不需要额外代码或依赖，但缺点是初始加载时会渲染所有视图组件，如果组件比较复杂可能会影响首屏性能，适合小场景使用。

总结 #

• 如果项目对路由缓存需求较多，优先推荐react-router-cache-route，功能完善且省心。
• 追求零依赖的话，手动实现KeepAlive组件或父组件控制显示隐藏都是不错的选择，后者更适合视图数量少的场景。

内容的提问来源于stack exchange，提问作者Ashish Singh