Learn React Hooks

Accessing route information

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() ...