1. 문제

로그인이 된 상태에서 로그아웃을 하는 경우 로그인 화면으로 되돌아가는 기능을 구현할 목적을 가지고 있음. 중간에 코드를 보다가 목적대로 작동하지 않는 로직을 발견함

2. 원인

import { useNavigate } from "react-router-dom";

const Layout = ({ children }) => {
  const navigate = useNavigate();

    if (!user) {
      navigate("/login");
    }
  }, [user, navigate]);

  const handleLogout = () => {
    navigate("/");
  };

  const handleProfile = () => {
    navigate("/profile");
  };

  const handletsetItem = () => {
    navigate("/testresiltitem");
  };

  const handletestList = () => {};
  navigate("/tsetresultpage");
  return (
    <div>
      <header>
        <nav>
          <Link to="/">홈</Link>
          <div className="space-x-4">
            {user ? (
              <>
                <button onClick={handleProfile}>프로필</button>
                <button onClick={handletsetItem}>테스트</button>
                <button onClick={handletestList}>결과 보기</button>
                <button onClick={handleLogout}>로그아웃</button>
              </>
            ) : (
              <Link to="/login">로그인</Link>
            )}
          </div>
        </nav>
      </header>
      <main className="container mx-auto pt-10 main">{children}</main>
    </div>
  );
};

export default Layout;

코드를 확인해보니 14번째 줄에서 "/"로 라우터 경로가 설정되어 있었고,

  <Route path="/" element={<Home />} />

홈은 path가 "/"로 작성되어 있다.

3. 해결 및 결과

  const handleLogout = () => {
    navigate("/login");
  };

경로를 "/"아닌 "/login"페이지로 이동할수 있게 수정하였고, 추후 기능 추가 작성후 테스트 해볼예정