Navigate

// Login.js

import React from 'react'

function Login() {
  return (
    <div>
      로그인 페이지
    </div>
  )
}

export default Login

// Mypage.js

import React from 'react'
import { Navigate } from 'react-router-dom';

function MyPage() {
  const isLoggedIn = false;

  return (
    <div>
      {/* 로그인 여부 확인 후 Navigate로 login페이지 이동 */}
      {/* replace: true로 기록 남기지 않음 */}
      {isLoggedIn ?
        '마이페이지' :
        <Navigate to='/login' replace={true} />
      }
    </div>
  )
}

export default MyPage

• Navigate는 로그인이 되어있지 않은 상태로 마이페이지에 접근하는 것을 막아줌
• replace: true를 작성해 기록을 남기지 않음(뒤로가기로 접근 방지)

// App.js

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Layout from './Layout'
import About from './pages/About'
import Article from './pages/Article'
import Articles from './pages/Articles'
import Home from './pages/Home'
import Login from './pages/Login'
import MyPage from './pages/MyPage'
import NotFound from './pages/NotFound'
import Profile from './pages/Profile'

function App() {
  return (
    <Routes>
      <Route path='/' element={<Layout />}>
        <Route index element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/profiles/:username' element={<Profile />} />
      </Route>

      <Route path='articles' element={<Articles/>}>
        <Route path=':id' element={<Article />} />
      </Route>
      <Route path='/login' element={<Login />} />
      <Route path='/mypage' element={<MyPage />} />

      <Route path='*' element={<NotFound />} />
    </Routes>
  )
}

export default App