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

这个问题在Framework7 React里挺常见的，Tabbar默认是内部状态管理，不会自动跟路由关联。

核心思路是：你需要自己维护一个状态来跟踪当前路由，然后把Tabbar的selected属性绑定到这个状态上。

来看修改后的代码：

import React, { useState, useEffect } from 'react';

import { App, View, Page, Toolbar, Tabbar, Tab, Link, Panel } from 'framework7-react';



function App() {

  const [currentUrl, setCurrentUrl] = useState('/');



  // 监听路由变化，更新Tabbar选中状态

  useEffect(() => {

    const f7 = f7;

    f7.on('routeChange', (newRoute) => {

      setCurrentUrl(newRoute.url);

    });

  }, []);



  // 根据当前路由返回对应的tab id

  const getSelectedTab = () => {

    if (currentUrl === '/about/') return '#tab2';

    return '#tab1';

  };



  return (

    

      {/* 侧边栏 */}

      

        

          

            

            

          

        

      



      {/* 主内容区 */}

      

        

          

            

              

                
首页内容


              

            

            

              

                
关于页面内容


              

            

          

          

          

            

            

          

        

      

    

  );

}

关键点说下：

第一，监听路由变化。你需要在App初始化时绑定routeChange事件，这样每次路由切换都能拿到最新的url。

第二，把Tabbar的selected属性改成动态计算。根据当前url判断应该显示哪个tab，这里用#tab1、#tab2这样的id来对应。

第三，侧边栏跳转时用的是link组件，Framework7会自动触发路由变化，你监听到之后更新状态，Tabbar就会跟着变了。

如果你用的是f7-router的history模式，直接用window.location.pathname判断也行，原理是一样的。

还有个偷懒的做法：直接给Link组件加tabLink和tabLinkActive属性，让它自己处理激活状态，但这样侧边栏跳转过来就不会自动选中，还是得用上面这种监听路由的方式。

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时我也用过，稳定可靠，试试看吧！