📍/components/Navigation.js

/components/Navigation.js 파일 생성 후 <Link to="url">내용</Link>컴포넌트를 사용하여 링크를 건다.

코드

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

const Navigation = () => (
  <nav>
    <ul>
      <li>
        <Link to="/">홈</Link>
      </li>
      <li>
        <Link to="/profile">프로필</Link>
      </li>
    </ul>
  </nav>
);

export default Navigation;

📍/routes/Profile.js

1. 사용자가 "/profile"로 이동 시 로그아웃 버튼을 볼 수 있게 하자.

firebase의 authService.signOut()

2. 그리고 로그아웃 버튼을 클릭하면 authService.signOut();을 사용하여 사용자의 계정을 로그아웃시키면 된다.

react-router-dom의 useNavigate()

3. 사용자의 계정을 로그아웃시킨 후, 그냥 두면 "/profile" 페이지에 머물기 때문에 "/"으로 리다이렉트해야 한다.
   리액트 라우터 돔의 useNavigate()을 사용하면 홈으로 리다이렉트할 수 있다.

const navigate = useNavigate();
// "/"으로 리다이렉트
navigate("/");

코드

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

export default () => {
  const navigate = useNavigate();
  const onLogOutClick = () => {
    authService.signOut();
    //home으로 돌아가기 위해 react router dom의 useNavigate() 메서드 사용
    navigate("/");
  };

  return (
    <>
      <button onClick={onLogOutClick}>로그아웃</button>
    </>
  );
};

📍/components/Router.js

1. 작성한 Navigation 컴포넌트와 profile 루트를 가져온다.

//🔥 Navigation 컴포넌트와 profile 루트를 가져온다.
import Navigation from "components/Navigation";
import Profile from "routes/Profile";

&&

2. 로그인을 했을 때만 네비게이션이 보이게 하고 싶기 때문에 isLoggedIn이 참인 경우에만 <Navigation />이 있을 수 있도록 &&을 사용해 코드를 작성하고 <Route />의 path에 url을 적는다.

<Router>
  {/*🔥 &&의 의미: <Navigation />이 존재하려면 isLoggedIn이 참이어야 한다*/}
  {isLoggedIn && <Navigation />}
  <Routes>
    {/* 로그인한 상태면 /으로, 아니면 /login으로 */}
    {isLoggedIn ? (
      <>
        <Route path="/" element={<Home />}></Route>
        <Route path="/profile" element={<Profile />}></Route>
        </>
    ) : (
      <Route path="/" element={<Auth />}></Route>
    )}
  </Routes>
</Router>

<Route path="*" element={<Navigate replace to="/" />} />

3. 정해진 url외에 다른 url로 접근시 모두 "/"로 리다이렉트하기 위해 <Redirect from="*" to="/" />를 사용하려고 했으나 React v.6 에서는 <Redirect />가 사라졌다고 한다..😮

• Routes 안에는 Route만 넣기를 권장
• <Redirect /> 대신 <Route />의 element 속성으로 <Navigate replace to="url"/>을 사용

<Route path="*" element={<Navigate replace to="/" />} />

먼저 <Route />의 element 속성으로 <Navigate replace to="url"/>을 사용하기 위해 react-router-dom에서 Navigate을 임포트 한다.

import {
  BrowserRouter as Router,
  Routes,
  Route,
  //🔥 <Route />의 element 속성으로 <Navigate replace to="url"/>을 사용하기 위해 react-router-dom에서 Navigate을 임포트 한다.
  Navigate,
} from "react-router-dom";

그러고 나서 <Route />의 element 속성으로 <Navigate replace to="url"/>을 사용하여 정해진 url외에 다른 url로 접근시 모두 "/"로 리다이렉트하면 된다.

코드

import React from "react";
import {
  BrowserRouter as Router<,
  Routes,
  Route,
  //🔥 React Router v.6 부터는 <Redirect /> 대신 <Route />의 element 속성으로 <Navigate replace to="url"/>을 사용한다.
  Navigate,
} from "react-router-dom";
//절대경로로 바꿈
import Auth from "routes/Auth";
import Home from "routes/Home";
//🔥 Navigation 컴포넌트와 profile 루트를 가져온다.
import Navigation from "components/Navigation";
import Profile from "routes/Profile";

//App에서 AppRouter로 보낸 prop인 isLoggedIn 받기
const AppRouter = ({ isLoggedIn }) => {
  return (
    <Router>
      {/*🔥 &&의 의미: <Navigation />이 존재하려면 isLoggedIn이 참이어야 한다*/}
      {isLoggedIn && <Navigation />}
      <Routes>
        {/* 로그인한 상태면 /으로, 아니면 /login으로 */}
        {isLoggedIn ? (
          <>
            <Route path="/" element={<Home />}></Route>
            <Route path="/profile" element={<Profile />}></Route>
            {/*🔥 정해진 url외에 다른 url로 접근시 모두 "/"로 리다이렉트하기*/}
            <Route path="*" element={<Navigate replace to="/" />} />
          </>
        ) : (
          <>
            <Route path="/" element={<Auth />}></Route>
            {/*🔥 여기도*/}
            <Route path="*" element={<Navigate replace to="/" />} />
          </>
        )}
      </Routes>
    </Router>
  );
};

export default AppRouter;