대응 라우터 4 - 상위 구성 요소에 하위 경로가로드되어 있는지 확인하십시오.

Question

반응 라우터 4를 사용하여 사용자 목록을 표시하고 있습니다. 경로가 \Users과 일치하면 구성 요소 Users이로드됩니다. 그 안에는 \Users\:id과 일치 할 때로드되는 Route (사용자 정보)이 정의되어 있습니다.

Users 페이지에는 몇 개의 열이있는 표/표가 있습니다. 사용자 정보의 경로는 사용자의 그리드를 축소 한 후 활성화 된 경우

render(){ 
    const {users, flags} = this.props; 
    return (
     <div> 
      <h3>Users</h3> 
      <div className="col-md-12"> 
       <UsersGrid users={this.state.users} /> 
      </div> 
      <Route path="https://stackoverflow.com/users/:id" component={UserDetail} /> 
     </div> 
    ) 
} 

는 내가 원하는 (예를 들어 클래스 COL-MD-4를 적용)과 오른쪽에있는 사용자의 세부 사항을 표시합니다.

그러나 요소 경로에 조건부로 클래스를 적용 할 수 있도록 자식 경로가 활성화되어 있는지 어떻게 확인할 수 있는지 잘 모르겠습니다. this.props.children을 사용해 보았지만 항상 정의되지 않았습니다. URL 주소 표시 줄에 표시되는 경우

Answer 1

당신은 ID와 같은 문자열을 포함하는 경우/사용자가 다음 조건을 확인하여 작업을 수행 한 후 다음에서는 window.location으로 확인하실 수 있습니다 반응 라우터

import { matchPath } from 'react-router' 

render(){ 
    const {users, flags, location } = this.props; 
    const match = matchPath(location.pathname, { 
     path: '/users/:id', 
     exact: false, 
     strict: false 
    }) 
    return (
     <div> 
      <h3>Users</h3> 
      <div className="col-md-12"> 
       <UsersGrid users={this.state.users} /> 
      </div> 
      <Route path="https://stackoverflow.com/users/:id" component={UserDetail} /> 
     </div> 
    ) 
} 

Answer 2

에서 matchPath의 사용을 만들 것 :

 if(/user/{anyid}) { 
     *your condition action* 
     } else { 
     *else action* 
     } 

id를 일치 시키려면 문자열 정규 표현식을 사용할 수 있습니다.