컴포넌트에서 라우팅 매개변수를 얻기 위해 반응을 사용하는 예를 공유하세요.

이 글은 주로 React가 컴포넌트에서 라우팅 매개변수를 얻는 방법에 대한 자세한 설명을 소개합니다. 여기에는 특정 참조 값이 있습니다. 관심 있는 친구는

라우팅 매개변수

를 참조할 수 있습니다. 목록 페이지가 많으면 동적 페이지를 제외하고 페이지의 내용과 다른 페이지 부분은 동일합니다. 이때 라우팅과 구성 요소를 어떻게 구성해야 합니까?

이 시나리오에서는 라우팅 매개변수 기능을 사용하고 매개변수가 포함된 라우팅 구성을 추가해야 합니다.

import List from './component/list';

<Route path="list/:id" component={List} />

경로 attribute의 :id는 경로의 매개변수(param)입니다. 목록 페이지의 구성요소를 살펴보겠습니다.

/list 对应了 list.js

import React from 'react';
class List extends React.Component {
 render () {
 return (
 <p>
 <h3>This is List page.</h3>
 <p>The list page id is 
  <b style={{color: &#39;red&#39;}}>{this.props.params.id}</b>
 </p>
 </p>
 );
 }
};
export default List;

List 컴포넌트에서는 this.props.params.id를 통해 실제 매개변수 값에 직접 액세스할 수 있습니다(여기서 id 키는 경로를 정의하는 :id에 해당합니다). data는 props를 통해 페이지 컴포넌트에 전달되므로 라우팅 관련 데이터에 매우 편리하게 접근할 수 있습니다.

위 내용은 컴포넌트에서 라우팅 매개변수를 얻기 위해 반응을 사용하는 예를 공유하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!