& lt; route & gt를 사용하여 경로를 어떻게 정의합니까? 요소?

구성 요소를 사용하여 경로를 어떻게 정의합니까?

React 라우터에서 <route></route> 구성 요소를 사용하여 경로를 정의하려면 주로 <browserrouter></browserrouter> 또는 <hashrouter></hashrouter> 와 같은 라우터 구성 요소 내에서 사용합니다. <route></route> 구성 요소는 path 현재 URL과 일치 할 때 UI 렌더링을 담당합니다. 사용 방법은 다음과 같습니다.

 <code class="jsx">import { BrowserRouter, Route } from 'react-router-dom'; function App() { return ( <browserrouter> <div> <route path="/" component="{Home}"></route> <route path="/about" component="{About}"></route> <route path="/contact" component="{Contact}"></route> </div> </browserrouter> ); }</code>

이 예에서는 세 가지 경로가 정의됩니다.

• 홈 루트 ( "/")는 Home 구성 요소를 렌더링합니다.
• 정보에 대한 정보 ( "/About")는 About 구성 요소를 렌더링합니다.
• 연락처 경로 ( "/contact")는 Contact 구성 요소를 렌더링합니다.

<route></route> 구성 요소는 다양한 방식으로 사용하여 구성 요소를 전달할 수 있습니다.

• 위에 표시된대로 component 소품을 직접 사용합니다.
• render 소품을 사용하여 추가 소품으로 구성 요소를 인라인 할 수 있습니다.
• children Prop을 사용하여 경로가 현재 URL과 일치하는지 여부에 관계없이 구성 요소를 렌더링 할 수 있습니다.

구성 요소와 함께 사용할 수있는 다른 소품은 무엇입니까?

React 라우터의 <route></route> 구성 요소는 동작을 정의하고 논리를 정의하는 몇 가지 소품을 지원합니다. 다음은 주요 소품입니다.

• path : 경로가 일치 해야하는 문자열 또는 문자열 배열. 지정되지 않으면 경로는 항상 일치합니다.
• component : 위치가 path 와 일치 할 때 렌더링 할 반응 구성 요소. 이 소품은 render 및 children 와 상호 배타적입니다.
• render : 위치가 일치 할 때 렌더링하기 위해 React 요소를 반환하는 함수. 추가 소품을 구성 요소에 전달해야하거나 인라인 렌더링을 수행해야 할 때 유용합니다.
• children : 반응 요소를 반환하는 함수. 경로가 경로와 일치하는지 여부에 관계없이 현재 위치에 관계없이 무언가를 렌더링하려는 애니메이션 또는 기타 상황에 유용합니다.
• exact : True 일 때, 전체 URL 경로가 접두사가 아니라 일치하는 경우에만 경로 일치하는 부울.
• strict : 사실이라면 path 에서 후행 슬래시를 중요하게 만드는 부울.
• location : 현재 위치를 나타내는 개체. 이것은 일반적으로 중첩 라우터에 사용됩니다.
• sensitive : 사실이라면 경로를 케이스에 민감하게 만드는 부울.

이 소품을 사용하면 응용 프로그램의 다양한 라우팅 요구에 맞게 <route></route> 구성 요소를 구성 할 수 있습니다.

구성 요소는 중첩 경로를 어떻게 처리합니까?

React 라우터의 <route></route> 구성 요소는 중첩 라우팅 개념을 통해 중첩 경로를 지원하여보다 복잡하고 체계적인 라우팅 구조를 허용합니다. 중첩 경로를 구현할 수있는 방법은 다음과 같습니다.

1. 부모 경로 정의 : 중첩 경로가 포함 된 기본 경로를 정의하여 시작하십시오.
2. children Prop 사용 : 부모 경로의 구성 요소 내에서 추가 <route></route> 구성 요소를 사용하여 중첩 경로를 정의 할 수 있습니다. 이것은 children Prop를 사용하거나 중첩 경로를 부모 구성 요소 내에서 직접 정의하여 수행 할 수 있습니다.

중첩 라우팅의 예는 다음과 같습니다.

 <code class="jsx">import { BrowserRouter, Route, Link } from 'react-router-dom'; function App() { return ( <browserrouter> <div> <route path="/" component="{Home}"></route> <route path="/users" component="{Users}"></route> </div> </browserrouter> ); } function Users({ match }) { return ( <div> <h2 id="Users">Users</h2> <ul> <li>
<link to="{`${match.url}/user1`}">User1</li> <li>
<link to="{`${match.url}/user2`}">User2</li> </ul> <route path="{`${match.path}/:userId`}" component="{User}"></route> </div> ); } function User({ match }) { return <h3 id="User-match-params-userId">User {match.params.userId}</h3>; }</code>

이 예에서 /users 경로는 Users 구성 요소를 렌더링 한 다음 중첩 <route></route> 사용하여 특정 사용자 (예 : /users/user1 )의 경로를 정의합니다. 소품으로 전달 된 match 객체는 중첩 경로에 대한 상대 URL을 구성하는 데 도움이됩니다.

구성 요소와 함께 '정확한'소품을 사용하는 방법을 설명 할 수 있습니까?

exact 소품은 <route></route> 구성 요소와 함께 사용하여 경로 경로가 시작과 일치하지 않고 전체 URL 경로와 일치하는지 확인합니다. 이것은 의도하지 않은 경기를 피하고 싶을 때 특히 유용합니다.

exact 소품을 사용하는 방법은 다음과 같습니다.

 <code class="jsx">import { BrowserRouter, Route } from 'react-router-dom'; function App() { return ( <browserrouter> <div> <route exact path="/" component="{Home}"></route> <route path="/about" component="{About}"></route> </div> </browserrouter> ); }</code>

이 예에서 :

• 경로가있는 경로 "/" exact 소품을 사용합니다. 이것은 "/about" 와 같은 URL이 아닌 루트 URL ( "/" )과 일치한다는 것을 의미합니다.
• exact 소품이 없으면 홈 루트 ( "/" )도 "/about" 와 같은 URL과 일치합니다.이 URL은 일반적으로 원하는 것이 아닙니다.

보다 일반적인 경로에서보다 구체적인 경로를 정의 할 때 exact 소품이 특히 중요해집니다. 예를 들어, 대시 보드 ( "/dashboard" )에 대한 경로가 있고 대시 보드 내의 특정 섹션 ( "/dashboard/settings" )에 대한 다른 섹션이있는 경우, 대시 보드 경로가 설정 경로와 일치하지 않도록 exact 사용되도록 할 수 있습니다.

요약하면, exact 소품은 경로 경로를 현재 URL과 정확하게 일치시켜보다 구체적인 경로와 의도하지 않은 일치를 피합니다.

위 내용은 & lt; route & gt를 사용하여 경로를 어떻게 정의합니까? 요소?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!