어떤것이 문제인지 모르겠습니다 라우터 연결하자 화면에 뜨지 않아요

• 바뀐 코드로 해도 안됩니다 

  아예 화면이 안떠요 처음에는 버전 문제인줄 알았는데 채팅룸 만드는데도 안뜨네요

   

  import React, { useEffect } from "react";

  import { Routes, Route, useNavigate } from "react-router-dom";

  
  

  import ChatPage from "./components/ChatPage/ChatPage";

  import LoginPage from "./components/LoginPage/LoginPage";

  import RegisterPage from "./components/RegisterPage/RegisterPage";

  
  

  import { getAuth, onAuthStateChanged } from "firebase/auth";

  
  

  import { useDispatch, useSelector } from "react-redux";

  import { setUser } from "./redux/actions/user_action";

  
  

  function App(props) {

  
  

    const navigate = useNavigate();

    let dispatch = useDispatch();

    const isLoading = useSelector((state) => state.user.isLoading);

  
  

    useEffect(() => {

    const auth = getAuth();

    onAuthStateChanged(auth, (user) => {

      if (user) {

        navigate("/");

        dispatch(setUser(user));

        // User is signed in, see docs for a list of available properties

        // https://firebase.google.com/docs/reference/js/firebase.User

        const uid = user.uid;

  
  

        } else {

        navigate("/login");

        //dispatch(clearUser());

        // User is signed out

        }

      });

  
  

    }, []);

  
  

    if (isLoading) {

    return <div>...loading</div>;

  
  

    } else {

      return (

        <Routes>

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

        <Route path="/login" element={<LoginPage />} />

        <Route path="/register" element={<RegisterPage />} />

        </Routes>

      );

    }

  
  

  }

  
  
  
  

  export default App;