반응 라우터에서 매개변수를 전달하는 방법

React Router에서 매개변수를 전달하는 방법: 1. 매개변수를 전달하려면 와일드카드를 사용하세요. 문자열만 전달할 수 있으며, 페이지를 새로 고칠 때 매개변수가 손실되지 않습니다. 2. 매개변수를 전달하려면 쿼리를 사용하세요. 페이지를 새로 고치면 매개변수가 손실됩니다. 3. 상태를 사용하여 매개변수를 전달합니다. 객체, 배열 등을 전달할 수 있습니다. 페이지를 새로 고치면 매개변수가 손실됩니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

반응 라우터에서 매개변수를 전달하는 방법

반응 라우터 라우팅에서 매개변수를 전달하는 방법에는 세 가지가 있습니다. 즉, 와일드카드를 통해 매개변수를 전달하고, 쿼리를 통해 매개변수를 전달하고, 상태를 통해 매개변수를 전달합니다.

1. 와일드카드 매개변수 전달

경로 정의 방법:

<Route path=&#39;/path/:name&#39; component={Path}/>

링크 구성요소:

<Link to="/path/通过通配符传参">通配符</Link>

매개변수 획득:

this.props.match.params.name

장점: 간단하고 빠릅니다. 페이지에서 매개변수는 손실되지 않습니다.

단점: 문자열만 전달할 수 있으며, 너무 많은 값을 전달하면 URL이 길고 보기 흉해집니다.

객체를 전송하려면 JSON.stringify()를 사용하여 문자열로 변환한 다음, 다른 페이지에서 받은 후 JSON.parse()를 사용하여 다시 변환하면 됩니다.

2.Query

Route 정의 방법:

<Route path=&#39;/query&#39; component={Query}/>

Link 구성 요소:

var query = {undefined
        pathname: '/query',
        query: '我是通过query传值 '
}

<Link to={query}>query</Link>

매개변수 획득:

this.props.location.query

장점: 우아하고 전송 가능한 개체

단점: 페이지 새로 고침, 매개변수가 손실되었습니다

3, state

경로 정의 방법:

<Link to={state}>state</Link>

링크 구성 요소:

var state = {undefined
        pathname: '/state',
        state: '我是通过state传值'
    }
    <Route path=&#39;/state&#39; component={State}/>

매개 변수 획득:

this.props.location.state

여기 this.props.location.state === '쿼리를 통해 값을 전달합니다.'

장점: 우아하고 전송 가능한 개체

단점: 페이지를 새로 고치면 매개변수가 손실됩니다.

권장 학습: "react 비디오 튜토리얼"

위 내용은 반응 라우터에서 매개변수를 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!