React Router: Holen Sie sich die Position in der Container-Komponente

Question

Ich muss auf den aktiven Pfad in der übergeordneten Komponente zugreifen, so dass ich abhängig vom Speicherort einige CSS variieren kann. Hier App ist - die Mutter:

class App extends React.Component { 

    render(){ 
    return (
     <div className="wrapper" > 
     <div className="content"> 
      <Router> 
      <div className="container_b"> 
      <Menu /> 
      <div> 
       <Route exact path="/" component={Home}/> 
       <Route path="/confidence" component={ConfidenceInterval}/> 
       <Route path="/proind" component={ProportionTestInd}/> 
       <Route path="/prodep" component={ProportionTestDep}/> 
      </div> 
      </div> 
      </Router> 
      <div className="push"></div> 
     </div> 
     <footer className="footer"><Footer /></footer> 
     </div> 
    ) 
    } 

} 

Answer 1

ich für die App-Komponente denken, haben Sie zwei Möglichkeiten. Zuerst wird die App mit der Komponente withRouter höherer Ordnung umschlossen. React-Router stellt eine Komponente höherer Ordnung bereit, die mitRouter bezeichnet wird und die Match-, History- und Standort-Props an die von ihr umschlossene Komponente übergibt. (für Details bitte withRouter überprüfen)

In diesem Fall können Sie an folgende

class App extends React.Component { 

    render(){ 
    const {location: {pathname}} = this.props // pathname gives you the current path 
    return (
     <div className="wrapper" > 
     <div className="content"> 
      <Router> 
      <div className="container_b"> 
      <Menu /> 
      <div> 
       <Route exact path="/" component={Home}/> 
       <Route path="/confidence" component={ConfidenceInterval}/> 
       <Route path="/proind" component={ProportionTestInd}/> 
       <Route path="/prodep" component={ProportionTestDep}/> 
      </div> 
      </div> 
      </Router> 
      <div className="push"></div> 
     </div> 
     <footer className="footer"><Footer /></footer> 
     </div> 
    ) 
    } 

} 

export const WrappedApp = withRouter(App) 

Zweite Option ist, (wieder für App-Komponente) Sie window.location (bitte window.location) verwenden können. location.pathname sollte in diesem Fall auch den aktuellen Pfad angeben.

Für andere Komponenten, wie Home, ConfidenceInterval usw., übergibt die Route standardmäßig Match-, History- und Location-Requisiten, so dass Sie diese verwenden können.