const {

  HashRouter,

  Switch,

  Route,

  Redirect

} = ReactRouterDOM

​

function App () {

  return (

   <HashRouter>

     <Navigation />

     <Switch>

       <Route

         path="/post/:id"

         component={PostPage} />

       <Redirect from="/" to="/post/1" />

     </Switch>

    </HashRouter>

  )

}

​

function PostPage ({ match }) {

  const [post, setPost] = React.useState(null)

  const postId = match.params.id

  const fetchPost = React.useCallback(async () => {

    const data = await fetch('https://jsonplaceholder.typicode.com/posts/' + postId)

    const response = await data.json()

    setPost(response)

  }, [postId]) // fetchPost gets re-created when post id changes

  React.useEffect(() => {

    setPost(null) // reset post on every page switch

    fetchPost()

  }, [fetchPost]) // useEffect gets called when fetchPost re-creates

  if (!post) return <div>Loading...</div>