반응 라우터: useHistory, useLocation 및 useParams

소개

나는 당신이 나의 이전 블로그를 읽었을 것으로 예상하므로 세 가지 경로 소품이 무엇인지 이미 알고 있습니다. 잘 모르시겠다면 제 이전 블로그를 확인해주세요. 3개의 경로 props를 전달하는 방법에 대해 논의하고 props로 전달하지 않고 액세스할 수 있는 또 다른 쉬운 방법을 보여주고 싶습니다.

사용내역

기본적으로 이 후크는 history 개체에 대한 액세스를 제공하고 페이지를 탐색하기 위한 여러 기능에 액세스할 수 있습니다. 내비게이션에 관한 모든 것입니다. 이것이 useHistory를 사용할 수 있는 방법입니다.

import { useHistory } from 'react-router-dom';

const Portfolio = (props) => {
    const history = useHistory();
    console.log(history);

    return (
        <div>
            Portfolio
        </div>
    );
};

export default Portfolio;

내부 역사는 무엇입니까?

좋아... 여기엔 많은 것들이 있어. 처음에는 혼란 스럽다는 것을 알고 있습니다. 이러한 속성의 가장 일반적인 용도에 대해 설명하겠습니다.

길이(숫자): 방문한 페이지의 길이입니다.

작업(문자열): (POP, PUSH, REPLACE)

POP: URL을 통해 경로 방문, 히스토리 이동 기능 사용( history.goBack() , history.goForward() , history.go() )

PUSH: history.push() 사용

교체: history.replace() 사용

.push(pathname: string, state: any)/(location: object): 기록 스택에 경로 또는 위치를 푸시합니다.
푸시를 사용하는 방법에는 여러 가지가 있으며 아래 예를 보여줍니다.

    //using pathname
    history.push("/blog");
    //https://localhost:3000/blogs

    //using pathname and state
    history.push("/blog", { fromPopup: true });
    //https://localhost:3000/blogs

    //using location
      history.push({
      pathname: "/blogs",
      search: "?id=5",
      hash: "#react",
      state: { fromPopup: true }
    });
    // https://localhost:3000/blogs?id=5#react

나는 전에 상태를 사용한 적이 없습니다. 그러나 문서를 읽은 후 문서에서 아이디어를 얻었습니다. 예를 들어 사용자가 어디에서 왔는지 알고 싶다면 상태를 활용할 수 있습니다.

.replace(pathname: string, state: any)/(location: object): 기본적으로 push와 유사하지만 기존 기록을 제거하고 새 기록으로 업데이트합니다. 사용자가 .replace 이후에 브라우저에서 다시 클릭할 때마다 이전 항목으로 돌아가지 않습니다.

.goBack(): 이전 기록으로 돌아갑니다.

.goForward(): 이전 기록으로 앞으로 이동합니다.

.go(델타: 숫자): 다른 인덱스로 이동하고 이 위치에서 인덱스 수를 지정할 수 있습니다(마이너스 또는 양수 가능)

쓰리고 기능은 한번도 써본적이 없지만 이 기능은 역사상 존재했었다는걸 알려드리고싶습니다

이해를 돕기 위해 codesandbox도 준비했습니다.

useLocation

간단히 말해서 이것은 항상 현재 URL을 반환하는 상태와 같습니다. URL이 변경되면 useLocation도 업데이트됩니다.

내부 위치는?

useLocation에는 useHistory와 같은 기능이 없으며 현재 URL에 대한 정보만 가져옵니다.

예제.push에서 사용하려고 했던 이전 링크localhost:3000/blogs?id=5#react를 사용하겠습니다.

해당 URL에서 useLocation을 호출하려고 하면 이 개체를 가져옵니다.



목적useLocation()은 현재 경로에서 정보를 가져오는 것이며 이러한 속성을 반환한다는 점을 명심하십시오.

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

useParams

이것은 react-router에서 이해하기 가장 쉬운 후크입니다. 이 후크를 호출할 때마다 모든 매개변수를 속성으로 저장하는 객체를 얻게 됩니다.

이 코드 줄만 있으면 매개변수에 액세스할 수 있습니다.

const params = useParams();

내 CodeSandBox에서 놀 수 있습니다.

결론

이 게시물이 react-router의 세 가지 주요 유용한 후크를 이해하는 데 도움이 되기를 바랍니다. 처음에는 혼란스럽지만 가지고 놀고 나면 모든 것이 이해되고 이해할 수 있습니다. react-router를 즐겨보세요! 나에게 질문하기 위해 의견을 게시하십시오.