export const MAIN_PATH = () => '/';

 

export const MAIN_PATH = () => '/';

export const AUTH_PATH = () => '/auth';

export const SEARCH_PATH = (searchWord: string) => `/search/${searchWord}`;

export const USER_PATH = (userEmail: string) => `/user/${userEmail}`;

export const BOARD_PATH = () => '/board';

export const BOARD_DETAIL_PATH = (boardNumber: string | number) => `detail/${boardNumber}`;

export const BOARD_WRITE_PATH = () => 'write';

export const BOARD_UPDATE_PATH = (boardNumber: string | number) => `update/${boardNumber}`;

 

 

 

이 경로 상수들은 애플리케이션에서 라우팅을 관리하고, 일관성을 유지하며, 유지보수를 용이하게 하는 데 사용됩니다. 이를 통해 개발자는 코드베이스의 여러 곳에서 경로를 재사용하고, 경로 변경에 따른 오류를 최소화할 수 있습니다.

 

 

 

• AUTH_PATH:
  • 인증(로그인/회원가입) 페이지의 경로입니다. '/' 뒤에 'auth'를 붙여서 '/auth' 경로를 반환합니다.

 

 

매개변수를 사용하는 경로 상수는 동적으로 경로를 생성할 수 있습니다.

예를 들어, SEARCH_PATH('my-search')를 호출하면 '/search/my-search' 경로를 생성합니다.

 

 

App.tsx에서 

'/' 를 {MAIN_PATH()}로 바꾼다.

이하 동

 

 <Routes>

      <Route element={<Container />}>

      <Route path={MAIN_PATH()} element={<Main />}/>

      <Route path={AUTH_PATH()} element={<Authentication/>} />

      <Route path= {SEARCH_PATH(`:searchWord`)} element={<Search />}/>

      <Route path= {USER_PATH(`userEmail`)} element={<User />}/>

      <Route path= {BOARD_PATH()}>

         <Route path={BOARD_WRITE_PATH()} element={<BoardWrite />} />

         <Route path={BOARD_DETAIL_PATH(':boardNumber')} element={<BoardDetail />} />

         <Route path={BOARD_UPDATE_PATH(':boardNumber')} element={<BoardUpdate />} />

         </Route>

         <Route path='*' element={<h1>404 Not Found</h1>} />

      </Route>

    </Routes>