로그인 된 유저는 LoginPage와 RegisterPage는 이용하면 안됨!

→ 로그인 안된 사람만 이용가능한 부분이다!

→ Redirect To 해서 Chatting Page로 이동시킨다.(로그인 유저가 LoginPage와 RegisterPage에 못가게 막고 ChattingPage로 이동하게끔 한다.)

서비스 구현 방법

1. HOC 파일을 새로 만들어서 구현
2. App.js (routing Page)에서 구현(여기서 사용하는 방법!)

인증이 되었는지 안되었는지 아는 방법

→ firebase Auth 에서 제공하는 모듈 사용하여 파악하기

→ firebase.auth().onAuthStateChanged 모듈 → callback을 이용하여 구현할 수 있다.

에러문구

TypeError: Cannot read properties of undefined (reading 'push')
    at App.js:26:1
    at Object.newNext [as next] (auth.ts:357:1)
    at subscribe.ts:104:1
    at subscribe.ts:233:1

→ history 객체가 없어서 나오는 에러

참고 자료 : https://reactrouter.com/web/api/history

해결책

1. Class Component → withRouter
2. Functional Component → useHistory(이 방법 사용!)

바뀐 코드

//import 부분
import {
  BrowserRouter as Router,
  Routes,
  Route,
  useHistory,
} from "react-router-dom";

//history 변수
let history = useHistory();

  useEffect(()=>{
    firebase.auth().onAuthStateChanged(user=>{
      console.log('user', user)
      //로그인이 된 상태
      if(user){
          history.push("/");
      }
      //로그인이 되지 않은 상태
      else{
          history.push("/login");
      }

→ 계속 오류 나는 이유

→ React Router Context가 있어야지 useHistory 사용 가능

(React Router Context가 Main component로 있는 sub-component(자녀 컴포넌트) 에서만 useHistory 사용 가능)

해결법

• BrowserRouter를 index.js에서 감싸주기

  → app.js를 Router로 감싸주면 된다.

app.js에서 <Router></Router>를 없앤다.

index.js 코드 변경

위 에러 사유

• React Router v6에서 useHistory가 제거 되었기 때문에 useNavigate 훅을 사용해서 브라우저 히스토리를 조작한다.

• app.js

  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";
  
  // firebase import 부분
  import firebase from "firebase/compat/app";
  import "firebase/compat/auth";
  import "firebase/compat/firestore";
  import "firebase/compat/storage";
  
  function App(props) {
  const navigate = useNavigate();
  
  useEffect(() => {
  firebase.auth().onAuthStateChanged((user) => {
  console.log("user", user);
  // 로그인이 된 상태
  if (user) {
  navigate("/");
  }
  // 로그인이 되지 않은 상태
  else {
  navigate("/login");
  }
  });
  }, [navigate]);
  
  return (
  <Routes>
  <Route exact path="/" element={<ChatPage />} />
  <Route path="/login" element={<LoginPage />} />
  <Route path="/register" element={<RegisterPage />} />
  </Routes>
  );
  }
  
  export default App;
  

• index.js

  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware } from 'redux';
  import promiseMiddleware from 'redux-promise';
  import ReduxThunk from 'redux-thunk';
  import Reducer from './redux/reducers';
  import { BrowserRouter as Router } from 'react-router-dom'
  import 'bootstrap/dist/css/bootstrap.min.css';
  
  const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore);
  
  ReactDOM.render(
    <React.StrictMode>
      <Provider store={createStoreWithMiddleware(Reducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
      )}>
        <Router>
          <App />
        </Router>
      </Provider>
    </React.StrictMode>,
    document.getElementById('root')
  );
  
  reportWebVitals();