React路由器獲取主路由器組件上的當前位置

我想知道如何從我用於定義路由的組件獲取當前位置。例如，我有一個叫做路由組件，它包含了所有的路徑，像這樣：React路由器獲取主路由器組件上的當前位置

class Routes extends React.Component { 
    render() { 
     return (
      <Router> 
       <Nav /> 
       <header>{customHeader}</header> 
       <Switch> 
        <Route exact path="/" component={Home} /> 
        <Route path="/about" component={About} /> 
        // Other routes 
       </Switch> 
      </Router> 
     ); 
    } 
};

然而，當我嘗試訪問this.props.location.pathname正如我在其他組件做，它返回undefined。

在其他組件上，我需要使用withRouter以便能夠訪問location信息。但是我不能將它與Routes組件一起使用，因爲它會引發錯誤。

我實際上並不需要pathname，我只是想檢查用戶是什麼路由，因爲在訪問特定頁面時我會呈現不同的頁眉內容。

來源

2017-04-14 celsomtrindade

一個解決方案是執行'location.pathname'，它與react-router無關，但是來自瀏覽器。 –

@SaugatAcharya是的..這或驗證到另一個組件將是我的其他選項。我只是想檢查主要組件是否可行。 – celsomtrindade

你在'this.props.location'中得到了什麼嗎？ –

將您的標題包裹在始終呈現的<Route>中。然後你可以通過道具獲得所有的東西。

class Routes extends React.Component { 
    render() { 
     return (
      <Router> 
       <Nav /> 
       <Route render={(props) => { 
        console.log(props.location) 
        return (
        <header>{customHeader}</header> 
       ) 
       }} /> 

       <Switch> 
        <Route exact path="/" component={Home} /> 
        <Route path="/about" component={About} /> 
        // Other routes 
       </Switch> 
      </Router> 
     ); 
    } 
};

來源

2017-04-16 00:51:56

React路由器獲取主路由器組件上的當前位置

回答

相關問題