Next, we are going to use the useCurrentRoute Hook to access information about the current route/URL. We are going to use this Hook to implement a footer, which will display the href value of the current route.

Let's get started implementing the footer now:

1. First, we create a new component for the footer. Create a new src/pages/FooterBar.js file, and import React, as well as the useCurrentRoute Hook from react-navi:

import React from 'react'
import { useCurrentRoute } from 'react-navi'

2. Then, we define a new FooterBar component:

export default function FooterBar () {

3. We use the useCurrentRoute Hook, and pull out the url object to be able to show the current href value in the footer:

    const { url } = useCurrentRoute()

4. Finally, we render a link to the current href value in the footer:

    return (
        <div>
            <a href={url.href}>{url.href}</a>
        </div>
    )
}

Now, when we, for example, open a post page, we can see the href value of the current post in the footer:

As we can see, our footer works properly—it always shows the href value of the current page.