React路由器：獲取容器組件中的位置

Question

我需要訪問父組件中的活動路徑，以便根據位置改變一些CSS。這裏是App - 父母：

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

我認爲對於App組件，您有兩個選擇。第一個是使用withRouter高階組件封裝App。 React-router提供了一個叫路由器的高階組件，它將匹配，歷史和位置道具傳遞給它所包裹的組件。 （詳情請查看withRouter）

在這種情況下，你可以到以下

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) 

第二個選項是，（再次應用程序組件），可以使用window.location的（請window.location）。 location.pathname在這種情況下也應該給你當前的路徑。

對於其他組件，例如Home，ConfidenceInterval等，Route默認會傳遞匹配，歷史和位置道具，以便您可以使用它們。