미니블로그 동적으로 브라우저이동하기 / project2-2

URL 라우팅 하기

react-router-dom

BrowserRouter, Routes, Route 컴포넌트를 가져옵니다. 이 컴포넌트들은 React 애플리케이션에서 브라우저의 주소와 라우팅을 관리하는 데 사용됩니다.

페이지 컴포넌트

MainPage, PostWritePage, LanguageViewPage, PortFolioViewPage, PostViewPage는 각각 메인 페이지, 포스트 작성 페이지, 언어 뷰 페이지, 포트폴리오 뷰 페이지, 포스트 뷰 페이지를 나타냅니다.

App

<BrowserRouter> 컴포넌트는 React Router의 핵심 요소 중 하나로, 브라우저의 주소와 라우팅을 관리합니다. 여기서는 애플리케이션의 최상위에 위치하며, 브라우저의 주소 변화에 따라 다른 컴포넌트를 렌더링합니다.

<Routes> 컴포넌트는 여러 개의 라우트를 정의하고, 해당하는 경로에 맞는 컴포넌트를 렌더링할 수 있게 해줍니다.

<Route> 컴포넌트는 개별 경로와 해당하는 컴포넌트를 지정합니다. 여기서 index 속성은 기본 경로를 나타내며, element 속성은 해당 경로에 렌더링될 컴포넌트를 지정합니다.

/post-write 경로는 <PostWritePage /> 컴포넌트를 렌더링하고, /language/:postId 경로는 <LanguageViewPage /> 컴포넌트를 렌더링합니다. 여기서 :postId는 동적으로 변하는 부분을 나타냅니다.