React_redirect 하기

특정 페이지에 유저가 진입했을 때 조건에 따라 다른 페이지로 리다이렉트 하는 경우가 있다.

예를 들어 MyPage로 들어가려 하는데 로그인 안된 경우 MyPage가 아니라 로그인 페이지로 리다이렉트 시키는 경우.

이를 위해 react-router-dom의 Navigate 컴포넌트를 쓴다.

// pages/Mypage.js
import { Navigate } from 'react-router-dom';

const MyPage = () => {
  const isLoggedIn = false;

  if (!isLoggedIn) {
    // Re-direction
    return <Navigate to='/login' replace={true} />;
  }
  return <div>My Page</div>;
};

export default MyPage;

조건이 충족되지 않은 경우 <Navigate> 컴포넌트에 리다이렉트 할 경로와 replace 옵션을 함께 넣어 반환한다.

현재 페이지를 기록에 남기지 않기 위해 replace 옵션을 true로 해준다.

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

const App = () => {
  return (
    <Routes>
      <Route element={<Layout />}>
        {/* <Route path='/' element={<Home />} /> */}
        <Route index element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/profiles/:username' element={<Profile />} />
      </Route>
      {/* Routing 중첩 */}
      <Route path='/articles' element={<Articles />}>
        <Route path='/articles/:id' element={<Article />} />
      </Route>

      <Route path='/login' element={<Login />} />
      <Route path='/mypage' element={<MyPage />} />

      {/* 그 외 모든 경로에는 NotFound 표시할 것 */}
      <Route path='*' element={<NotFound />} />
    </Routes>
  );
};

export default App;