Router 4 reagieren - erkennen, ob eine untergeordnete Route in eine übergeordnete Komponente geladen wurde

Question

Ich benutze Reagent Router 4, um eine Liste von Benutzern anzuzeigen. Die Komponente Users wird geladen, wenn die Route mit \Users übereinstimmt. Darin habe ich eine Route definiert (Benutzerdetails), die geladen wird, wenn die URL entspricht.

Die Users Seite hat ein Raster/Tabelle mit wenigen Spalten.

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

Was ich will, ist, wenn der Benutzer Details Route dann aktiv ist, den Benutzer Gitter zu schrumpfen (zB Klasse col-md-4 gelten) und dem Benutzer Detail seiner rechten Seite zeigen.

Aber ich bin nicht sicher, wie kann ich feststellen, ob eine untergeordnete Route aktiv ist, so dass ich eine Klasse auf ein Element bedingt anwenden kann. Ich habe versucht, this.props.children zu verwenden, aber es ist immer undefiniert.

Answer 1

Sie würden den Einsatz von matchPath von reagieren-Router

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

Wenn url zeigt in der Adresszeile, dann können Sie mit window.location überprüfen, ob es Zeichenfolge wie id enthält nach/Benutzer dann Aktion mit Bedingungsprüfung durchführen :

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

Sie können Zeichenfolge Regex verwenden, um die ID zu entsprechen.