React 라우터 (BrowserRouter, Hashrouter, MemoryRouter)의 다양한 유형의 라우터는 무엇입니까?-프런트엔드 Q&A-php.cn

React 라우터 (BrowserRouter, Hashrouter, MemoryRouter)의 다양한 유형의 라우터는 무엇입니까?

React 라우터에는 다양한 라우팅 시나리오 및 환경을 처리하도록 설계된 여러 유형의 라우터가 있습니다. 각각을 탐색합시다.

BrowserRouter :
- 설명 : BrowserRouter는 HTML5 히스토리 API를 사용하여 UI를 URL과 동기화합니다. 웹 응용 프로그램에 사용되는 가장 일반적인 유형의 라우터입니다.
- 기능 : 해시 기호 (#)없이 깨끗한 URL을 사용하여 전체 페이지 재 장전없이 내비게이션을 가능하게합니다.
- 예 : BrowserRouter 기반 애플리케이션에서 /about 를 탐색 할 때 URL은 yourdomain.com/about 로 변경됩니다.
해시로 :
- 설명 : Hashrouter는 URL의 해시 부분 ( #이후의 부품)을 사용하여 경로 정보를 저장합니다.
- 기능 : 동적 요청을 처리하지 않는 서버에 유용하거나 HTML5 이력 API를 지원하지 않는 정적 파일 서버에 배포 할 때 유용합니다.
- 예 : 탐색 /about 탐색하면 yourdomain.com/#/about 와 같은 URL이 발생합니다.
MemoryRouter :
- 설명 : MemoryRouter는 브라우저의 URL 이력 대신 메모리 내비게이션 기록을 유지합니다.
- 기능 : 브라우저 주소 표시 줄과 상호 작용하지 않으므로 모바일 앱 또는 전자 애플리케이션과 같은 브라우저 비 환경에 유용합니다.
- 예 : 내비게이션 변경은 메모리에서 발생하며 브라우저에서 URL이 변경되지 않습니다.

React 애플리케이션에서 해시 로터 대신 BrowserRouter를 언제 사용해야합니까?

다음 시나리오에서 REACT 응용 프로그램에서 해시로 대신 BrowserRouter를 사용해야합니다.

최신 서버 지원 : 서버가 동적 라우팅을 지원하고 모든 URL 경로에 대한 요청을 처리 할 수있을 때 BrowSerRouter를 사용하십시오. 이는 서버 측 렌더링 또는 API 경로를 지원하는 대부분의 최신 웹 서버 및 프레임 워크에서 일반적입니다.
깨끗한 URL : 해시 기호 (#)없이 깨끗하고 SEO 친화적 인 URL을 선호하는 경우 BrowserRouter가 더 나은 선택입니다. 이는 더 나은 사용자 경험과 검색 엔진 최적화에 중요합니다.
단일 페이지 응용 프로그램 (SPA) : 페이지 재 장전없이 원활한 탐색 및 클라이언트 측 라우팅을 원하는 일반적인 단일 페이지 응용 프로그램의 경우 BrowSerRouter가 선호됩니다.
SSR (Server-Side Rendering) : 서버 측 렌더링을 구현할 때 BrowserRouter는 일반적으로 서버 측 진행기 처리와 잘 정렬되기 때문에 일반적으로 필요합니다.
개발 환경 : 개발 중에 BrowserRouter는 특히 생산 환경이 HTML5 히스토리 API를 지원하는 경우 응용 프로그램이 생산에서 어떻게 작동하는지에 대한보다 정확한 시뮬레이션을 제공 할 수 있습니다.

대조적으로, 동적 요청을 처리하지 않는 서버로 작업 할 때 또는 HTML5 히스토리 API를 지원하지 않는 정적 파일 서버에 배포하는 경우 해시 로터를 사용해야합니다.

기능 측면에서 MemoryRouter는 BrowserRouter 및 Hashrouter와 어떻게 다릅니 까?

MemoryRouter는 다음과 같은 방법으로 BrowserRouter 및 Hashrouter와 다릅니다.

역사 저장 :
- MemoryRouter : 브라우저의 히스토리 스택 대신 내비게이션 기록을 메모리에 저장합니다.
- BrowserRouter : 브라우저의 히스토리 스택을 사용하여 내비게이션을 관리합니다.
- 해시로 : URL 해시를 사용하여 내비게이션 기록을 관리합니다.
URL 영향 :
- MemoryRouter : 탐색시 브라우저 주소 표시 줄에서 URL을 변경하지 않습니다.
- BrowserRouter : 해시 (#)없이 브라우저 주소 표시 줄에서 URL을 변경합니다.
- 해시로 : 브라우저 주소 표시 줄에서 URL을 변경하지만 해시 (#)를 포함합니다.
환경 적합성 :
- MemoryRouter : 브라우저 기록 조작이 적용되지 않는 테스트, 반응 기본 또는 전자 응용 프로그램과 같은 브라우저 비 환경에 이상적입니다.
- BrowserRouter : HTML5 이력 API를 지원하는 브라우저 환경에서 웹 애플리케이션에 가장 적합합니다.
- HASHROUTER : 동적 요청에 대한 서버 지원이 제한적이거나 존재하지 않는 웹 애플리케이션에 적합합니다.
행동 차이 :
- MemoryRouter : 내비게이션 변경은 응용 프로그램 상태에 국한되며 브라우저의 기록 또는 URL에 반영되지 않습니다.
- BrowserRouter : 전통 및 백 버튼 기능을 통해 전통적인 웹 브라우징을 모방하는 탐색으로 완벽한 사용자 경험을 제공합니다.
- Hashrouter : 해시를 사용하여 응용 프로그램 상태를 관리하여 서버 측 지원에 의존하지 않는 라우팅을위한 폴백 방법을 제공합니다.

React 라우터에서 MemoryRouter를 구현하기위한 특정 사용 사례는 무엇입니까?

MemoryRouter는 다음과 같은 특정 사용 사례에서 특히 유용합니다.

반응 응용 프로그램 테스트 :
- 라우팅을 사용하는 RECT 구성 요소에 대한 단위 테스트 또는 통합 테스트를 작성할 때 MemoryRouter를 사용하여 브라우저의 기록에 영향을 미치지 않고 내비게이션을 시뮬레이션 할 수 있습니다.
기본 응용 프로그램에 반응 :
- 기존 웹 브라우저 환경에서 React Native 앱이 실행되지 않기 때문에 MemoryRouter를 사용하여 모바일 앱 상태 내에서 내비게이션을 처리 할 수 있습니다.
전자 응용 분야 :
- Electron으로 구축 된 데스크탑 응용 프로그램의 경우 MemoryRouter는 브라우저의 히스토리 API에 의존하지 않고 응용 프로그램 내에서 내비게이션을 관리하는 방법을 제공합니다.
node.js를 사용한 서버 측 렌더링 (SSR) :
- 서버 측 렌더링 시나리오에서 MemoryRouter는 서버에서 클라이언트의 기록을 조작 할 필요없이 경로와 일치하는 데 사용될 수 있습니다.
분리 또는 임베디드 애플리케이션 :
- 다른 앱 또는 iframe에 포함 된 응용 프로그램을 작성할 때 MemoryRouter를 사용하면 부모 응용 프로그램의 기록을 방해하지 않고도 라우팅이 가능합니다.
조롱 및 프로토 타이핑 :
- 개발 초기 단계 또는 프로토 타이핑시 메모리 로터를 사용하여 전체 서버를 설정하지 않고도 라우팅 로직을 신속하게 테스트 할 수 있습니다.