リアクタルータ4 - 親コンポーネントに子ルートがロードされているかどうかを検出します。

Question

リアクションルータ4を使用してユーザリストを表示しています。ルートが\Usersに一致すると、コンポーネントUsersがロードされます。その中には、URLが\Users\:idと一致したときにロードされるRoute（ユーザーの詳細）が定義されています。

Usersページには、列数が少ないグリッド/テーブルがあります。ユーザの詳細ルートは、ユーザーのグリッドを縮小（たとえばクラスCOL-MD-4を適用）し、その右にユーザーの詳細を表示するためにアクティブである場合。私は何をしたいことはある

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> 
    ) 
} 

しかし、私は条件付きで要素にクラスを適用できるように、子ルートがアクティブであるかどうかをどのように検出できますかわかりません。私はthis.props.childrenを使ってみましたが、常に定義されていません。

Answer 1

あなたは、URLがアドレスバーに表示されている場合、それは/使用者の後に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に一致する文字列正規表現を使用できます。