Using Hooks for Routing

In the previous chapter, we learned how to request resources with Hooks. We first implemented requesting resources using State/Reducer and Effect Hooks. Then, we learned about the axios and react-request-hook libraries.

In this chapter, we are going to create multiple pages and implement routing in our app. Routing is important in almost every application. To implement routing, we are going to learn how to use use the Navi library, a Hook-based navigation system. Finally, we are also going to learn about dynamic links, and how to access routing information using Hooks.

The following topics will be covered in this chapter:

• Creating multiple pages
• Implementing routing
• Using routing Hooks

Technical requirements

A fairly recent version of Node.js should already be installed (v11.12.0 or higher). The npm package manager for Node.js also needs to be installed.

The code for this chapter can be found on the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter07.

Check out the following video to see the code in action:

http://bit.ly/2Mm9yoC

Please note that it is highly recommended that you write the code on your own. Do not simply run the code examples that have been provided. It is important that you write the code yourself in order to be able to learn and understand properly. However, if you run into any issues, you can always refer to the code example.

Now, let's get started with the chapter.

Creating multiple pages

At the moment, our blog application is a so-called single-page application. However, most larger apps consist of multiple pages. In a blog app, we at least want to have a separate page for each blog post.

Before we can set up routing, we need to create the various pages that we want to render. In our blog app, we are going to define the following pages:

• A home page, which will display a list of all posts
• A post page, which will display a single post

All pages will show a HeaderBar, which renders the Header, UserBar, ChangeTheme, and CreatePost components. We are now going to start by creating a component for the HeaderBar. Afterward, we are going to implement the page components.

Creating the HeaderBar component

...

Implementing routing

We are going to use the Navi library for routing. Navi supports React Suspense, Hooks, and error boundary APIs of React natively, which makes it the perfect fit to implement routing through the use of Hooks. To implement routing, we are first going to define routes from the pages that we defined in the previous section. Finally, we are going to define links from the main page to the corresponding post pages, and from these pages back to the main page.

Toward the end of this chapter, we are going to extend our routing functionality by implementing routing Hooks.

Defining routes

The first step when implementing routing is to install the navi and react-navi libraries. Then, we define the routes. Follow the...

Using routing Hooks

After implementing basic routing using navi and react-navi, we are now going to implement more advanced use cases using routing Hooks, which are provided by react-navi. Routing Hooks can be used to make routing more dynamic. For example, by allowing navigation to different routes from other Hooks. Furthermore, we can use Hooks to access all route-related information within a component.

Overview of Navi's Hooks

First, we will have a look at three of the Hooks that are provided by the Navi library:

• The useNavigation Hook
• The useCurrentRoute Hook
• The useLoadingRoute Hook

The useNavigation Hook

...

Summary

In this chapter, we first defined two pages for our blog: the home page and a page for single posts. We also created a component for the HeaderBar. Afterward, we implemented routing by defining routes, links to the single posts, and links back to the main page. Finally, we used routing Hooks to implement dynamic navigation when creating a new post, and implemented a footer that shows the current URL.

Routing is very important, and is used in almost every application. We now know how to define separate pages and how to link between them. Furthermore, we learned how to dynamically navigate between pages using Hooks. We also learned how to access routing information with Hooks for more advanced use cases.

There are many more things that the Navi library can do. However, this book focuses on Hooks, so most features of Navi are out of scope. For example, we can fetch data using...

Questions

In order to recap what we have learned in this chapter, try answering the following questions:

1. Why do we need to define separate pages?
2. How do we define routes using the Navi library?
3. How do we define routes with URL parameters?
4. How are static links defined with Navi?
5. How can we implement dynamic navigation?
6. Which Hook is used to access the route information of the current route?
7. Which Hook is used to access the route information of the currently loading route?

Further reading

If you are interested in more information about the concepts that we have learned in this chapter, take a look at the official documentation of the Navi library: https://frontarm.com/navi/en/.