React Router를 사용하여 링크에 Prop을 어떻게 전달할 수 있나요?

React-Router의 Link에 Prop 전달

React-Router의 구성 요소에서는 속성을 새 보기에 전달할 수 있습니다. 이렇게 하려면 의 to 속성을 사용하세요. 원하는 속성을 가진 객체를 전달합니다. 예:

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

대상 보기에서 다음 패턴을 사용하여 전달된 속성에 액세스합니다.

<code class="js">render() {
    console.log(this.props.match.params.testvalue, this.props.location.query.backurl)
    return <span>{testvalue} {backurl}</span>    
}</code>

참고: 위 구문은 이제 구식입니다.

후크를 사용하여 업데이트된 기능 구성 요소:

<code class="js">const CreatedIdeaView = () => {
    const { testvalue } = useParams();
    const { query, search } = useLocation(); 
    console.log(testvalue, query.backUrl, new URLSearchParams(search).get('backUrl'))
    return <span>{testvalue} {backurl}</span>    
}</code>

추가 고려 사항

• 대상 경로에 일치하는 경로가 정의되어 있는지 확인하세요. 전달된 속성을 받습니다. 이 예시에서는 경로를 다음과 같이 정의해야 합니다.

<code class="js"><Route name="ideas" path="/:testvalue" handler={CreateIdeaView} /></code>

• React-Router에서 사용하는 Link 컴포넌트가 최근 버전에서 업데이트되었습니다. 속성 전달 구문은 사용되는 버전에 따라 다를 수 있습니다.

위 내용은 React Router를 사용하여 링크에 Prop을 어떻게 전달할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!