230921 개발일지 TIL - React Router와 Jotai를 사용하여 특정 페이지에만 컴포넌트 표시

React Router와 Jotai를 사용하여 특정 페이지에만 컴포넌트 표시

리액트에서 특정 페이지나 라우트에서만 특정 컴포넌트를 보여주고 싶을 때가 있어서 알아보았다.

문제 상황
'Theme'라는 컴포넌트가 있고, 이 컴포넌트는 웹사이트의 관리자(admin) 페이지에서만 보여주고 싶었다. 그런데 현재 상황은 'Theme' 컴포넌트가 모든 페이지에 나타나며, 관리자 페이지로 이동할 때마다 설정된 테마가 초기화된다.

해결 방법

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Layout from '../components/common/layout/Layout';
import Home from '../pages/kwangPage/Home';
import Login from '../pages/kwangPage/Login';
import Signup from '../pages/kwangPage/Signup';
import Main from '../pages/customerPage/Main';
import Admin from '../pages/adminPage/Admin';

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Layout />}>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/signup" element={<Signup />} />

          {/* admin 페이지 */}
          <Route path="/admin">
            {/* admin 페이지의 하위 경로들 */}
            <Route element={<Admin />}>
              {/* Theme 컴포넌트 */}
              <Route
                path="/*"
                element={
                  <>
                    {/* Theme 컴포넌트 내용 */}
                    <Theme />
                  </>
                }
              />
            </Route>
          </Route>

          {/* 나머지 고객 페이지 */}
          <Route path="/:uid" element={<Main />} />

        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

위와 같이 설정하면, 'Theme' 컴포넌트는 admin 페이지에서만 표시되고, 그 외의 모든 페이지에서는 표시되지 않게 된다.

결론
리액트 라우터와 jotai를 사용하면 간단하게 특정 페이지에만 컴포넌트를 보여주거나 숨기는 것이 가능했다. 이 방법을 활용하여 웹사이트의 다양한 부분에 동적인 요소를 추가할 수 있다.