React-Router의 \'Link\' 구성 요소에 Prop을 전달하는 방법은 무엇입니까?

React-Router의 "링크"에 속성 전달

React-Router와 함께 React를 사용할 때 다음을 사용하여 속성을 새 보기에 전달할 수 있습니다. component.

React-Router v4 및 v5에서 업데이트된 구문

React-Router v4 및 v5에서 props를 전달하려면 다음 구문을 사용하세요.

<Link to={{ pathname: path, query: queryObject, search: searchString }}>
  ...
</Link>

여기서:

• pathname은 새 보기에 대한 경로입니다.
• query는 쿼리 매개변수가 포함된 개체입니다.
• search는 ?foo=bar와 같은 쿼리 문자열.

대상 구성 요소의 Prop에 액세스

대상 구성 요소에서 다음을 통해 전달된 Prop에 액세스할 수 있습니다. 다음 기술을 사용하여 연결합니다.

withRouter 상위 구성 요소의 오래된 사용:

• 대상 구성 요소를 withRouter로 래핑합니다. 일치 및 위치 소품:

const NewView = withRouter(OriginalView);

후크를 사용하는 현재 구현:

• 기능 구성 요소 내에서 useParams 및 useLocation 후크를 사용하여 일치 및 위치 소품:

const NewView = () => {
  const { testvalue } = useParams();
  const { query, search } = useLocation();

  return (
    <div>
      {testvalue} {query.backUrl}
    </div>
  );
};

예

다음 예를 고려하세요.

App.js:

<Link to={{ pathname: '/ideas/:testvalue', query: { testvalue: 'hello' } }}>Create Idea</Link>

CreateIdeaView.js:

const CreateIdeaView = () => {
  const { testvalue } = useParams();
  console.log(testvalue); // prints 'hello'

  return (
    <div>{testvalue}</div>
  );
};

이 예에서 "아이디어 만들기" 링크를 클릭하면 hello 값과 함께 testvalue 속성이 CreateIdeaView 구성 요소에 전달됩니다.

참고:

• Link 구성 요소의 경로에는 매개변수 자리 표시자가 포함되어야 합니다. 경로: '/ideas/:testvalue'.
• useParams 후크는 경로에 정의된 모든 매개변수가 포함된 객체를 반환합니다.
• useLocation 후크는 현재 위치에 대한 정보가 포함된 객체를 반환합니다. 쿼리 및 검색이 포함됩니다.
• 쿼리는 키-값 쌍을 포함하는 개체인 반면, 검색 문자열은 전체 쿼리 문자열을 포함합니다.

위 내용은 React-Router의 \'Link\' 구성 요소에 Prop을 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!