React 라우터에서 다른 구성 요소의 사용을 설명하십시오 (예 : & lt; browserrouter & gt;, & lt; route & gt;, & lt; link & gt;, & lt; navlink & gt;, & lt; switch & gt;).

React 라우터에서 다른 구성 요소의 사용을 설명하십시오 (예 : , , <link>, , ).

React Router는 React 응용 프로그램에서 라우팅을 처리하는 인기있는 라이브러리입니다. 다음은 React 라우터에 사용 된 다양한 구성 요소에 대한 자세한 설명입니다.

• <browserrouter></browserrouter> : 이것은 React 라우터의 기본 라우터 구성 요소입니다. HTML5 히스토리 API를 사용하여 UI를 URL과 동기화합니다. 일반적으로 동적 요청을 처리 할 수있는 서버에서 제공되는 웹 응용 프로그램에 사용됩니다. <browserrouter></browserrouter> 구성 요소는 전체 애플리케이션을 감싸서 모든 어린이에게 라우팅 컨텍스트를 제공합니다.
• <route></route> :이 구성 요소는 특정 URL이 지정된 경로와 일치 할 때 UI를 렌더링하는 데 사용됩니다. 현재 URL을 기반으로 구성 요소를 조건부로 렌더링하는 데 사용할 수 있습니다. <route></route> 구성 요소를 직접 렌더링하거나 항상 렌더링되는 어린이를 통과 시키거나보다 복잡한 논리를 위해 render 소품을 사용하는 등 다양한 방식으로 사용할 수 있습니다.
• <link> :이 구성 요소는 응용 프로그램에서 링크를 만드는 데 사용됩니다. HTML <a></a> 태그와 유사하지만 React 라우터의 컨텍스트 내에서 작동하여 전체 페이지 재 장전없이 내비게이션이 발생하도록합니다. 다른 경로 사이의 간단한 탐색에 사용됩니다.
• <navlink></navlink> : 현재 URL과 일치 할 때 렌더링 된 요소에 <link> 속성을 추가하는 특수 버전. 활성 링크를 강조하려는 내비게이션 메뉴를 작성하는 데 특히 유용합니다.
• <switch></switch> :이 구성 요소는 <route></route> 구성 요소를 함께 그룹화하는 데 사용됩니다. 위치와 일치하는 첫 번째 자식 <route></route> 또는 <redirect></redirect> 를 렌더링합니다. 이것은 한 번에 하나의 경로 만 렌더링하려는 독점 라우팅에 유용합니다.

React 라우터에서 와 의 주요 차이점은 무엇입니까?

React 라우터에서 <browserrouter></browserrouter> 와 <hashrouter></hashrouter> 의 주요 차이점은 주로 URL을 처리하는 방법과 다른 서버 환경과의 호환성과 관련이 있습니다.

• URL 처리 :

  • <browserrouter></browserrouter> HTML5 히스토리 API를 사용하여 UI를 URL과 동기화합니다. 브라우저의 히스토리 스택을 조작하여 깨끗한 URL과 같은 /about 허용합니다.
  • <hashrouter></hashrouter> UI를 UI를 URL과 동기화하기 위해 URL의 해시 부분 (즉, # 이후의 부품)을 사용합니다. 이로 인해 /#/about 와 같은 URL이 발생합니다.

• 서버 호환성 :

  • <browserrouter></browserrouter> 동적 요청을 처리하기 위해 서버 측 구성이 필요합니다. 사용자가 URL로 직접 탐색하거나 페이지를 새로 고침하면 모든 경로에 대해 동일한 index.html 파일을 제공하도록 서버를 구성해야합니다.
  • <hashrouter></hashrouter> 서버는 루트 경로에 대해 index.html 파일 만 제공하면 서버 측 구성이 필요하지 않습니다. URL의 해시 부분은 전적으로 클라이언트면에서 처리됩니다.

• 사용 사례 :

  • <browserrouter></browserrouter> Node.js 서버 또는 적절한 URL 재 작성 규칙이있는 서버와 같은 동적 요청을 처리 할 수있는 서버에서 제공되는 웹 응용 프로그램에 선호됩니다.
  • <hashrouter></hashrouter> 는 정적 웹 사이트 또는 GitHub 페이지와 같은 동적 요청을 처리 할 수없는 서버에 배포 할 때 유용합니다.

및 는 어떻게 REACT 응용 프로그램에서 라우팅을 관리하기 위해 함께 사용될 수 있습니까?

<route></route> 및 <switch></switch> 함께 사용하여 경로를 그룹화하고 한 번에 하나의 경로 만 렌더링하여 REACT 응용 프로그램에서 라우팅을 관리 할 수 ​​있습니다. 그들이 함께 일하는 방법은 다음과 같습니다.

• <route></route> 사용 : 각 <route></route> 구성 요소는 해당 경로가 현재 URL과 일치 할 때 렌더링 할 경로와 구성 요소를 지정합니다. 예를 들어:

   <code class="jsx"><route path="/about" component="{About}"></route> <route path="/contact" component="{Contact}"></route></code>

• <switch></switch> 사용 : <switch></switch> 구성 요소는 다중 <route></route> 구성 요소를 래핑하는 데 사용됩니다. 첫 번째 일치 <route></route> 만 렌더링되도록합니다. 이것은 중첩 노선을 처리하거나 한 번에 하나의 경로 만 렌더링하려는 경우에 유용합니다. 예를 들어:

   <code class="jsx"><switch> <route exact path="/" component="{Home}"></route> <route path="/about" component="{About}"></route> <route path="/contact" component="{Contact}"></route> <route component="{NotFound}"></route> </switch></code>

  이 예에서 <switch></switch> 구성 요소는 첫 번째 일치 경로를 렌더링합니다. 경로가 일치하지 않으면 NotFound 구성 요소를 렌더링합니다.

<route></route> 및 <switch></switch> 함께 사용하면 다른 경로를 처리하고 현재 URL에 따라 적절한 구성 요소 만 렌더링되도록 강력한 라우팅 시스템을 만들 수 있습니다.

React 라우터의 탐색에 <link> 대 를 사용하면 어떤 이점이 있습니까?

<link> 및 <navlink></navlink> 는 모두 React 라우터에서 내비게이션에 사용되지만 다른 이점을 제공합니다.

• <link> :

  • 기본 내비게이션 : <link> 는 다른 경로 간의 간단한 탐색에 사용됩니다. HTML <a></a> 태그와 유사하지만 React 라우터의 맥락에서 작동합니다.
  • 추가 스타일 없음 : <link> 링크의 활성 상태를 나타내는 스타일을 자동으로 추가하지 않습니다. 활성 링크를 강조하려면 스타일링을 수동으로 추가해야합니다.
  • 유스 케이스 : <link> 활성 링크를 강조 할 필요가없는 일반 탐색에 적합합니다.

• <navlink></navlink> :

  • 활성 상태 스타일 : <navlink></navlink> 현재 URL과 일치 할 때 렌더링 된 요소에 스타일 속성을 자동으로 추가합니다. 이를 통해 내비게이션 메뉴에서 활성 링크를 쉽게 강조 표시 할 수 있습니다.

  • 사용자 정의 가능한 액티브 스타일 : activeClassName 및 activeStyle Props를 사용하여 활성 스타일을 사용자 정의 할 수 있습니다. 예를 들어:

     <code class="jsx"><navlink to="/about" activeclassname="active">About</navlink></code>

  • 사용 사례 : <navlink></navlink> 현재 활성화되는 링크를 시각적으로 표시하려는 내비게이션 메뉴를 작성하는 데 특히 유용합니다.

요약하면 <link> 는 자동 활성 상태 스타일이없는 기본 탐색에 적합한 반면 <navlink></navlink> 최소한의 추가 코드로 활성 링크를 강조하려는 내비게이션 메뉴에 유리합니다.

위 내용은 React 라우터에서 다른 구성 요소의 사용을 설명하십시오 (예 : & lt; browserrouter & gt;, & lt; route & gt;, & lt; link & gt;, & lt; navlink & gt;, & lt; switch & gt;).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!