React-Router의 "링크"에 속성 전달
React-Router와 함께 React를 사용할 때 다음을 사용하여 속성을 새 보기에 전달할 수 있습니다. component.
React-Router v4 및 v5에서 업데이트된 구문
React-Router v4 및 v5에서 props를 전달하려면 다음 구문을 사용하세요.
<Link to={{ pathname: path, query: queryObject, search: searchString }}> ... </Link>
여기서:
대상 구성 요소의 Prop에 액세스
대상 구성 요소에서 다음을 통해 전달된 Prop에 액세스할 수 있습니다. 다음 기술을 사용하여 연결합니다.
withRouter 상위 구성 요소의 오래된 사용:
const NewView = withRouter(OriginalView);
후크를 사용하는 현재 구현:
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 구성 요소에 전달됩니다.
참고:
위 내용은 React-Router의 \"Link\" 구성 요소에 Prop을 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!