Framework7 React中如何在页面切换时保持Tabbar选中状态？

博主博泽提问于 2026-01-29 15:35:27 阅读 163

移动

大家好，我在用Framework7 React开发移动端时遇到个问题：当通过侧边栏菜单跳转页面后，底部Tabbar的选中状态会重置，怎么才能让Tabbar根据路由保持对应的选中项呢？

我按照官方文档配置了Tabbar和路由，代码大概是这样写的：


function App() {
  return (
    
      
        
          
            
            首页内容
          
          
            首页
            关于
          
        
      
    
  );
}

但当我从侧边栏点击跳转到关于页面后，Tabbar的选中状态还是停留在首页。试过手动给selected属性赋值，但感觉和路由状态不联动，有没有更好的解决方案？

我来解答赞 5 收藏

反馈

1 条解答

玉惠 Lv1

Framework7 React里这种情况确实挺常见的，尤其是涉及到路由和Tabbar状态同步的时候。直接手动设置selected属性确实不优雅，也容易出问题。我给个简单可行的解决方案：

核心思路是通过Framework7提供的$f7ready方法，结合路由参数动态控制Tabbar的状态。修改你的代码如下：

import React from 'react';

import Framework7, { Framework7React } from 'framework7-react';



function App() {

  return (

    

      

        

          

            

              

                
                  selected={(window.location.pathname === '/home')} 

                  iconF7="home" 

                  text="首页" 

                  link="/home"

                />

                
                  selected={(window.location.pathname === '/about')} 

                  iconF7="info" 

                  text="关于" 

                  link="/about"

                />

              

            

          

          

            

            

          

        

      

    

  );

}



export default App;

关键点：
1. selected属性通过检查当前路由window.location.pathname来动态设置。
2. 每个TabbarLabel绑定了对应的路由地址，确保切换时自动更新选中状态。

如果你用的是更复杂的路由（比如嵌套路由），可以考虑用useRoute或类似的方法获取当前路由信息，原理都是一样的。

这套做法在WordPress项目里集成Framework7时我也用过，稳定可靠，试试看吧！

2026-01-31 11:09