반응 라우터의 고리

React Router V5는 강력한 후크 메커니즘을 도입하여 4 개의 편리한 라우팅 후크를 제공하여 라우팅 관리를 단순화합니다. 이 기사는 새로운 Rout Router v5의 새로운 모드를 신속하게 시작하여 새로운 라우팅 렌더링 모드를 먼저 소개 한 다음 각 후크의 사용을 탐구합니다.

V5 전에 라우터를 반응합니다

 // 경로를 렌더링하고 경로 속성을 가져옵니다<route component="{Home}" path="/"></route>

// 추가 속성을 전달합니다<route path="/" render="{({" match><profile match="{match}" mine="{true}"></profile> } /></route>

component 구문을 사용하는 경우 라우팅 속성 ( match , location 및 history )이 암시 적으로 구성 요소로 전달됩니다. 그러나 추가 속성을 통과 해야하는 경우 대신 render 속성을 사용해야합니다. component 구문에 인라인 함수를 추가하면 구성 요소가 렌더링 될 때마다 구성 요소가 다시 마운트됩니다.

V5 이후 라우터를 반응합니다

<route path="/"><home></home></route>

Home 구성 요소는 더 이상 라우팅 특성을 암시 적으로 수신하지 않습니다. 그러나 Route 자체를 수정하지 않고 Home 구성 요소에 추가 속성을 추가 할 수 있습니다. 렌더링 할 때마다 구성 요소를 다시 마운트하는 문제를 피하십시오. 이는보다 간결하고 효율적인 API 설계입니다.

라우팅 속성이 더 이상 암시 적으로 통과되지 않으므로 match , history 또는 location 액세스하는 방법은 무엇입니까? 모든 구성 요소를 withRouter 로 래핑해야합니까? 이곳은 후크가 작동하는 곳입니다.

후크는 React 16.8에 도입되었으므로 React를 사용해야합니다.

useHistory 후크

• React 라우터의 history 속성에 대한 액세스를 제공합니다.
• 경로에서 사용하는 history 패키지 종속성을 가리 킵니다.
• 주로 push , replace 등과 같은 기능을 통해 프로그래밍 방식의 라우팅에 사용됩니다.

 'React-Router-Dom'에서 {useHistory} 가져 오기;

기능 홈 () {
  const history = useHistory ();
  반환 <button onclick="{()">history.push ( '/profile')}> 프로파일</button> ;
}

useLocation 후크

• React 라우터의 location 속성에 대한 액세스를 제공합니다.
• 브라우저의 window.location 과 유사하지만 라우팅 상태와 위치를 나타내며 어디서나 액세스 할 수 있습니다.
• 주로 쿼리 매개 변수 또는 완전한 라우팅 문자열에 액세스하는 데 사용됩니다.

 'React-Router-Dom'에서 {Uselocation} 가져 오기;

기능 프로파일 () {
  const location = uselocation ();
  useeffect (() => {
    const currentpath = location.pathname;
    Const SearchParams = New UrlSearchParams (location.search);
    // ... CurrentPath 및 SearchParams를 사용하십시오
  }, [위치]);
  반품<p> 윤곽</p> ;
}

location 속성은 불변이 없으므로 Route가 변경 될 때마다 useEffect 기능을 호출하므로 검색 매개 변수 또는 현재 경로를 조작하는 데 좋습니다.

useParams 후크

• URL의 매개 변수에 대한 액세스를 제공합니다.
• 이 기능은 이전에 match.params 통해서만 구현되었습니다.

 'react-router-dom'에서 {useparams, route} import;

기능 프로파일 () {
  const {name} = useparams ();
  반품<p> {name}의 프로필</p> ;
}

기능 대시 보드 () {
  반품 (
    <div>
      <nav>
        <link to="{`/profile/ann`}">앤의 프로필
      </nav>
      <main>
        <route path="/profile/:name"><profile></profile></route>
      </main>
    </div>
  );
}

useRouteMatch 후크

• match 개체에 대한 액세스를 제공합니다.
• 인수가 없으면 구성 요소 또는 부모 구성 요소에서 가장 가까운 일치가 반환됩니다.
• 주로 중첩 경로를 만드는 데 사용됩니다.

 'react-router-dom'에서 {userOutematch, route} 가져 오기;

기능 auth () {
  const match = userOutematch ();
  반품 (
    <div>
      <route path="{`${match.url}/login`}"><login></login></route>
      <route path="{`${match.url}/register`}"><register></register></route>
    </div>
  );
}

useRouteMatch 사용하여 location 매개 변수를 전달하여 Route 렌더링하지 않고 match 객체에 액세스 할 수 있습니다.

예를 들어, 프로필을 /profile 로 렌더링하고 URL에 사람의 이름 ( /profile/dan 또는 /profile/ann )이 포함 된 경우 다른 사람의 프로필을 렌더링하십시오. 후크를 사용하지 않으면 Switch 작성하고 두 개의 경로를 나열하고 소품으로 사용자 정의해야합니다. 그러나 이제 후크를 사용하는 것은 다음을 수행 할 수 있습니다.

 import {route, browserRouter는 라우터로, 링크, userOutematch} 'react-router-dom';

기능 프로파일 () {
  const match = userOutematch ( '/profile/: name');
  리턴 매치?<p> {match.params.name}의 프로필</p> :<p> 내 자신의 프로필</p> ;
}

내보내기 기본 기능 app () {
  반품 (
    <router>
      <nav>
        <link to="/profile">내 프로필
        <br>
        <link to="{`/profile/ann`}">앤의 프로필
      </nav>
      <route path="/profile"><profile></profile></route>
    </router>
  );
}

exact 하거나 sensitive 객체와 같은 모든 Route 속성을 useRouteMatch 에 전달할 수도 있습니다.

요약

훅과 명백한 Route 자체는 숨겨진 장점이 있습니다. 이 후크는 초기 모드로 나타나는 혼란과 복잡성을 피하고, 인간 오류를 줄이며, 라우팅 코드를 더 쉽게 유지할 수 있으며, 새로운 React 라우터 버전으로 쉽게 업그레이드 할 수 있습니다.

위 내용은 반응 라우터의 고리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!