반응 라우터 v4 매개 변수가있는 공유 구성 요소

Question

반응 라우터 v4를 사용 중이며 '/'및 '/ view/: id'에 모두 표시되는 구성 요소가 있습니다.

공통 구성 요소에서 경로가 '/ view/: id'일 때 위치에 액세스 할 수 있지만 'id'매개 변수에 액세스 할 수있는 방법이 있는지 궁금합니다.

여기에 제가 사용하는 코드와 빠른 demo이 있습니다.

<Router> 
    <div> 
     <ul style={{ listStyleType: "none", padding: 0 }}> 
     <li> 
      <Link to="/">Home</Link> 
     </li> 
     <li> 
      <Link to="/view/a">a</Link> 
     </li> 
     <li> 
      <Link to="/view/b">b</Link> 
     </li> 
     </ul> 
     <hr /> 
     <Route 
     path="/" 
     render={ ({match}) => (
      <div> 
      <div> 
       <b>Common component</b> 
       <p>{"Params " + JSON.stringify(match.params)}</p> 
       <i>How to access params.id here?</i> 
      </div> 
      <hr /> 
      <Route 
       path="/view/:id" 
       render={({ match }) => <div>{"Params " + JSON.stringify(match.params)}</div>} 
      /> 
      </div> 
     )} 
     /> 
    </div> 
    </Router> 

Answer 1

귀하의 질문 : "?"/ "경로입니다 때 매개 변수를 ID에 액세스 할 수 있습니다 방법"

전달하지 않는 매개 변수에는 액세스 할 수 없습니다.

링크 A와 B에서는 URL에 매개 변수를 전달합니다. path="/view/:id"id이 키이고 값은 URL에서 전달할 변수가됩니다.

당신은 path="/"