경로 정의에서 구성 요소를 인스턴스화 할 때 경로의 param을 참조하는 방법은 무엇입니까? 내 route.tsx에 내가 정의 다음이, 현재 라우터 V4

Question

에 도달 :

테스트 구성 요소가 실제로 소품에 소요

<Route exact={true} path="/test/:id" component={Test} /> 

가 ID를했다.

<Test id="23232"/> 

테스트 구성 요소의 매개 변수에 액세스 할 때 전달할 수 있도록 전달할 수 있도록 ": id"에 대한 경로를 어떻게 정의할까요?

<Route exact={true} path="/test/:id" component={(props)=>{ <Test id={props.match.params.id} />}} /> 

같은 뭔가이 가능합니까?

감사합니다, 데릭

Answer 1

예이 가능하다.

그러나, 당신은 괄호의 추가 세트를 제거하는 구문을 조금 조정해야합니다

<Route exact={ true } path="/test/:id" component={ (props) => <Test id={ props.match.params.id } /> } /> 

또한 렌더링 사용 할 수 있습니다를 오히려 구성 요소 이상 :

<Route exact={ true } path="/test/:id" render={ (props) => <Test id={ props.match.params.id } /> } /> 

docs :

아래의 render 또는 children 대신에 component를 사용할 때 라우터는 React.createElement를 사용하여 주어진 구성 요소로부터 새로운 React 요소를 만듭니다. 즉, 구성 요소 속성에 인라인 함수를 제공하면 모든 렌더마다 새 구성 요소가 만들어집니다. 기존 구성 요소를 업데이트하는 대신 기존 구성 요소를 마운트 해제하고 새 구성 요소를 마운트합니다. 인라인 함수에 인라인 렌더링을 사용하려면 render 또는 children prop (아래)를 사용하십시오.

https://reacttraining.com/react-router/web/api/Route/component