React-Router와 연결하여 Prop을 전달하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

React-Router와 연결하여 Prop을 전달하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-11-01 13:20:29

원래의

939명이 탐색했습니다.

How to Pass Props in Link with React-Router?

Link React-Router에서 Prop 전달

React-Router의 Link 구성 요소를 사용하면 구성 요소 간에 데이터를 전달할 수 있습니다. 이렇게 하려면 링크의 to prop에 매개변수를 정의하면 this.props를 사용하여 연결된 구성요소에서 해당 매개변수의 값에 액세스할 수 있습니다.

문제:

정의.

해결책:

정의:

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

로그인 후 복사

위치를 사용하여 데이터 전달:

react-router v4/v5를 사용하는 경우 위치 객체를 통해 데이터를 전달할 수 있습니다:

링크(쿼리):

<Link to={{pathname: '/', query: {backUrl: 'theLinkData'}}} />

로그인 후 복사

링크(검색):

<Link to={{pathname: '/', search: '?backUrl=theLinkData'}} />

로그인 후 복사

데이터 접근(기능적 구성 요소) ):

const CreatedIdeaView = () => {
  const { query, search } = useLocation();
  console.log(query.backUrl, new URLSearchParams(search).get('backUrl'));
};

로그인 후 복사

데이터 액세스(클래스 구성 요소):

class CreateIdeaView extends React.Component {
  render() {
    console.log(this.props.location.query.backUrl);
    return <div>{this.props.location.query.backUrl}</div>;
  }
}

로그인 후 복사

예:

class App extends React.Component {
  render() {
    return (
      <div>
        <Link to={{pathname: '/ideas', query: {foo: 'bar'}}} />
        <RouteHandler />
      </div>
    );
  }
}

로그인 후 복사

class Ideas extends React.Component {
  render() {
    const { match, location } = this.props;
    console.log('props form link', this.props);
    return <p>{location.query.foo}</p>;
  }
}

로그인 후 복사

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