好客租房119-tabbar栏目高亮bug修复

路由切换页面高亮的问题

import React from 'react'
import { TabBar } from 'antd-mobile'
import {BrowserRouter as Router,Route, Link} from "react-router-dom"
import News from "../News/index.js"
import Index from "../Index/index.js"
import HouseList from "../HouseList/index.js"
import Profile from "../Profile/index.js"
//导入组件自己的样式文件
 
// 路由奇幻的时候代码没有覆盖到 不能高亮
//在路由奇幻时候 执行 菜单高亮代码
//钩子函数创建
import "./index.css"
export default class Home extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      //    重定向
        selectedTab:this.props.location.pathname,
      };
    }
    //判断路由是否变化
    componentDidUpdate(prevProps){
        if(prevProps.location.pathname!=this.props.location.pathname){
            //此时发生路由切换了
            this.setState({
                selectedTab:this.props.location.pathname
            })
        }
    }
    renderTabBarItem(){
        const tabItems=[{
            title:"首页",
            icon:'icon-ind',
            path:"/home/index"
        },
        {
            title:"搜索",
            icon:'icon-findHouse',
            path:"/home/list"
        },
        {
            title:"资讯",
            icon:'icon-infom',
            path:"/home/news"
        },
        {
            title:"我的",
            icon:'icon-my',
            path:"/home/profile"
        }
    ]
        return tabItems.map(item=> (
            <TabBar.Item
            title={item.title}
            key={item.title}
            icon={
              <i className={`iconfont ${item.icon}`}></i>
            }
            // 选中后的展示图片
            selectedIcon={
              <i className={`iconfont ${item.icon}`}></i>
            }
 
            
            // 是否选中
            selected={this.state.selectedTab === item.path}
            // bar 点击触发，需要自己改变组件 state & selecte={true}
            onPress={() => {
              this.setState({
                selectedTab: item.path,
              });
              //路由切换
              this.props.history.push(item.path)
            }}
          >
              {/* // 将 home 组件作为实参传递
            {this.renderContent(<Home />)} */}
 
          </TabBar.Item>
        )
        )
    }
   
    render() {
     
      return (
        <div className='home'>
             <Route path="/home/profile" component={Profile}></Route>
            <Route path="/home/list" component={HouseList}></Route>
             <Route exact path="/home" component={Index}></Route>
            <Route path="/home/news" component={News}></Route>
          <TabBar
            unselectedTintColor="#21b97a"
            tintColor="#33A3F4"
            barTintColor="white"
            noRenderContent={true}
          >
              {this.renderTabBarItem()}
          </TabBar>
        </div>
      );
    }
  }
总结

componentDidUpdate解决当前问题