React-Hook-Example.jsx

import React from 'react';
import RouteHook from 'react-route-hook';
 
const Data = (props) => (
  <div>
    {props.data}
  </div>
);
 
class AppContainer extends React.Component {
 
  state = {
    data: '',
  }
 
  fetchData = (props) => {
    axios.get(`/api/${props.match.params.id}`)
      .then(res => this.setState({ data: res.data }))
  }
 
  shouldFetchData = (newProps, oldProps) => {
    if (oldProps.match.params.id !== newProps.match.params.id) {
      this.fetchData(newProps)
    }
  }
 
  logout(props) {
    console.log(`You are leaving the route ${props.location.pathname}`)
  } 
 
  render() {
    return (
      <RouteHook 
        path="home/:id"
        onEnter={this.fetchData}
        onChange={shouldFetchData}
        onLeave={this.logout}
        render={(routerProps) => <Data data={this.state.data} />}
      />
    )
  }
}