[React] react-router-dom

[DrMaemi]

React Router Dom

yarn add react-router-dom

사용 방법

1. <BrowserRouter> 를 사용하던가
2. createBrowserRouter 를 사용하던가

BrowserRouter

• index.tsx -> App.tsx -> Main.tsx 순으로 참조하고, PageHeader.tsx 가 있을 때
• <BrowserRouter> 태그 안에 <PageHeader> 와 <Routes>, <Route> 선언하여 사용
• 모든 페이지에 헤더가 나타난다. (장점일 수도, 단점일 수도)

createBrowserRouter

• index.tsx -> App.tsx 를 참조할 때 App.tsx 에 <PageHeader> 없이 <RouterProvider router={router} ... /> 선언
• createBrowserRouter 로 객체를 생성하여 export 한 router 가 / 경로부터, 다양한 경로에 해당하는 페이지 컴포넌트 바인딩 (ex. / -> Main.tsx)
• Main.tsx -> PageHeader.tsx, Outlet
  • <Outlet> 이 선언되는 사용 방식은 헤더가 페이지에 나타나지 않는다. (정확한 규칙은 모르겠다. Outlet 이 import 되어 사용된 페이지에서 화면 전환 시에만 완전히 새로운 페이지 컴포넌트를 렌더링 하는 건지.. 확실한 건 라우팅되는 페이지가 Outlet 에 대치되어 헤더와 함께 렌더링되진 않는다.
  • (2024-07-08) <Outlet /> 에 페이지 내용이 대체되는 구조. Router 의 children 구조를 활용해야 제대로 동작한다. "리액트 라우터(React Router)란? ( install 설치 / createBrowserRouter )," 를 참조해 도움 됨

A. 참조

• "Tutorial," reactrouter.com
• "[Typescript] Typescript에서 react router 사용하기," velog.io
• "리액트 라우터(React Router)란? ( install 설치 / createBrowserRouter ),"

[harshsrivastav8055]

Hello , I want to work on this issue can you please assign me this .