反応ルータv4のルート変更を聞くにはどうすればよいですか？

Question

私はルートとして機能する2つのボタンを持っています。ルートが変更されるたびに、アクティブなボタンが変更されていることを確認したい。

反応ルータv4のルート変更を聞く方法はありますか？

Answer 1

location小道具を得るにはwithRouterを使用します。コンポーネントが原因で、新しいルートで更新されると値が変更された場合、私がチェック：

@withRouter 
class App extends React.Component { 

    static propTypes = { 
    location: React.PropTypes.object.isRequired 
    } 

    // ... 

    componentDidUpdate(prevProps) { 
    if (this.props.location !== prevProps.location) { 
     this.onRouteChanged(); 
    } 
    } 

    onRouteChanged() { 
    console.log("ROUTE CHANGED"); 
    } 

    // ... 
    render(){ 
    return <Switch> 
     <Route path="/" exact component={HomePage} /> 
     <Route path="/checkout" component={CheckoutPage} /> 
     <Route path="/success" component={SuccessPage} /> 
     // ... 
     <Route component={NotFound} /> 
     </Switch> 
    } 
} 

はそれが

Answer 2

history v4 libを使用する必要があります。上記に拡大することthere

history.listen((location, action) => { 
    console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`) 
    console.log(`The last navigation action was ${action}`) 
}) 

Answer 3

から

例には、履歴オブジェクトで取得する必要があります。 BrowserRouterを使用している場合は、withRouterをインポートし、コンポーネントをHoCでラップして、ヒストリオブジェクトのプロパティと関数に小道具を介してアクセスすることができます。

import { withRouter } from 'react-router-dom'; 

const myComponent = ({ listen }) => { 

    listen((location, action) => { 
     // location is an object like window.location 
     console.log(action, location.pathname, location.state) 
    }); 

    return <div>...</div>; 
}; 

export default withRouter(myComponent); 

注意すべき唯一のものはwithRoutesとhistoryアクセスするには、他のほとんどの方法はそれに彼らド・構造などのオブジェクトを小道具を汚染するように見えるということです。