gmlx/project/src/components/TopBarM/index.tsx

import React, { useEffect, useState } from "react";
import styles from "./index.module.scss";
import history from "@/utils/history";
 function TopBarM() {
  const [activeIndex, setActiveIndex] = useState(0);
  useEffect(() => {
    const path = window.location.hash.split('/')[1]
    const index = myDataTemp.siderDataM.findIndex(item => item.path === path)
    setActiveIndex(index)
  }, [])
  const handleClick = (index: number, path: string) => {
    const pathRes = path === 'view' ? 'view/three' : path
    history.push(`/${pathRes}`)
  }
  return (
    <div className={styles.TopBarM}>
     {myDataTemp.siderDataM.map((item, index) => (
      <div className={`item ${index === activeIndex ? 'itemAc' : ''}`} key={index} onClick={() => handleClick(index, item.path)}>
        <div className="title">{item.title}</div>
      </div>
     ))}
    </div>
  )
}

const MemoTopBarM = React.memo(TopBarM);

export default MemoTopBarM;