Tab 삭제 중, 리다이렉트 안되는 경우

문제

Tab을 삭제하면 바로 전 탭으로 이동해서 전페이지를 보여줘야하는데 탭만 삭제되고 페이지는 그대로 남는 현상이 생긴다

코드를 자세히 보니 전탭 path로 리다이렉트하는 코드가 없어서 생겼다

해결

전코드

  const removeTab = useCallback(
    (targetKey: string) => {
      let newActiveKey = activeKey;
      let lastIndex = -1;
      tabArray.forEach((tab, i) => {
        if (tab.key === targetKey) {
          lastIndex = i - 1;
        }
      });
      const newPanes = tabArray.filter((tab) => tab.key !== targetKey);
      if (newPanes.length && newActiveKey === targetKey) {
        if (lastIndex >= 0) {
          newActiveKey = newPanes[lastIndex].key;
        } else {
          newActiveKey = newPanes[0].key;
        }
      }
      setTabArray(newPanes);
      setActiveKey(newActiveKey);
    },
    [activeKey, tabArray]
  );

후코드

  const removeTab = useCallback(
    (targetKey: string) => {
      let newActiveKey = activeKey;
      let lastIndex = -1;
      let newPath: string = ''; // 기본값을 빈 문자열로 설정
      // 삭제할 탭을 찾고, 삭제된 탭의 이전 인덱스를 기록
      tabArray.forEach((tab, i) => {
        if (tab.key === targetKey) {
          lastIndex = i - 1;
        }
      });
      console.log('탭 삭제 버튼 클릭했을때 Array tabArray', tabArray);
      // 새로운 탭 배열 생성 (삭제된 탭을 제외한 배열)
      const newPanes = tabArray.filter((tab) => tab.key !== targetKey);

      if (newPanes.length > 0) {
        if (newActiveKey === targetKey) {
          if (lastIndex >= 0) {
            newActiveKey = newPanes[lastIndex].key;
            newPath = newPanes[lastIndex].path || ''; // tab.path가 undefined일 경우 빈 문자열로 설정
          } else {
            newActiveKey = newPanes[0].key; // 첫 번째 탭으로 이동
          }
        }
      } else {
        newActiveKey = '';
      }
      console.log('탭 삭제 버튼 클릭했을때 newActiveKey', newActiveKey);
      setTabArray(newPanes);
      setActiveKey(newActiveKey);

      // 경로 리다이렉트
      if (newPath) {
        navigate(newPath); // navigate()를 사용하여 경로 이동
      }
    },

    [activeKey, tabArray]
  );