React路由器如何在路由更改時更改組件中的元素的類名稱？

Question

我有以下方式路線：

<Route path="" component={Sidebar}> 
    <Route path="pages/about" component={PageFactory}" /> 
    <Route path="news" component={NewsFactory}" /> 
</Route> 

現在我想添加一個類時的路線更改側邊欄組件。所以，如果路由變成「/ pages/about」，我想要添加「is-open」className到Sidebar組件中的一個元素。如果路由變成「/」，我想遠離Sidebar組件中元素的className。

我該如何做到這一點？

Answer 1

每個組件都有一些有用的屬性。

在側邊欄組件，你可以這樣做：

const Sidebar = React.createClass({ 
    render() { 
    let { location:{pathname, params, query} } = this.props; // router props 
    } 
}); 

然後你就可以檢測是否pathname是about然後做你的is-open