react-router（v3）切换页面时不刷新页面，实现显示和隐藏子路由组件

最新推荐文章于 2025-07-15 12:09:50 发布

Baymax627

最新推荐文章于 2025-07-15 12:09:50 发布

阅读量7.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/jl381169437/article/details/79821905

前端专栏收录该内容

31 篇文章

订阅专栏

本文介绍了如何在React-Router v3中切换子路由时保持页面状态，通过判断当前路由来控制子组件的显示与隐藏，避免页面刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v4版本应该也差不多的解决方法

思路很简单：就是在｛this.props.children｝渲染的地方进行处理，根据当前路由名称判断组件显示与隐藏。

children即this.props.children;
将children保存到全局windows中
save = (children) => {
    this.routeName = children.props.route.name;
    if (!window.routeCache) window.routeCache = {};
    if (!window.routeCache[this.path]) window.routeCache[this.path] = {};
    if (!window.routeCache[this.path][this.routeName]) {
      window.routeCache[this.path][this.routeName] = children;
    }
  }

然后在｛this.props.children｝的位置使用下面的方法，判断当前路由选择对应组件进行显示和隐藏
render = () => {
    return Object.keys(window.routeCache[this.path]).map((key) => {
      if (key === this.routeName) return <div key={key} style={{height: '100%'}}>{window.routeCache[this.path][key]}</div>;
      return <div key={key} style={{display: 'none'}}>{window.routeCache[this.path][key]}</div>;
    });
  }