huaDongGoods/src/components/LeftBar/index.tsx

import styles from "./index.module.scss";
import classNames from "classnames";
import history from "@/utils/history";
import { useLocation } from "react-router-dom";
import { useEffect, useState } from "react";
export default function LeftBar({ data }: any) {
  const cutRouter = (path: string) => {
    history.push(path);
  };
  const location = useLocation();

  const [pathId, setPathId] = useState(1);
  useEffect(() => {
    const arr = location.pathname.split("/");
    let id = 1;
    if (arr[2]) id = Number(arr[2]);

    setPathId(id);
  }, [location]);
  return (
    <div className={styles.LeftBar}>
      {data.length > 0
        ? data.map((v: any) => (
            <div
              onClick={() => cutRouter(v.path)}
              className={classNames("leftRow", v.id === pathId ? "active" : "")}
              key={v.id}
            >
              <div></div>
              &emsp;{v.name}&emsp;
              <div></div>
            </div>
          ))
        : null}
    </div>
  );
}