Handling Navigation with Routes

Almost every web application requires routing, which is the process of responding to a URL based on a set of route handler declarations. In other words, this is a mapping from the URL to rendered content. However, this task is more involved than it seems at first, due to the complexities of managing different URL patterns and mapping them to appropriate content rendering. This includes handling nested routes and dynamic parameters and ensuring proper navigation flow. The complexities of these tasks are why you’re going to leverage the react-router package in this chapter, the de facto routing tool for React.

First, you’ll learn the basics of declaring routes using JSX syntax. Then, you’ll learn about the dynamic aspects of routing, such as dynamic path segments and query parameters. Next, you’ll implement links using components from react-router.

Here are the high-level topics that we’ll cover in this chapter...

Technical requirements

You can find the code files for this chapter on GitHub at https://github.com/PacktPublishing/React-and-React-Native-5E/tree/main/Chapter07.

Declaring routes

With react-router, you can collocate routes with the content that they render. By defining routes using JSX syntax alongside the components they are associated with, react-router empowers developers to create a clear and logical structure for their React applications. This collocation makes it easier to understand how different parts of the application are connected and navigated, leading to improved readability and maintainability of the code base.

Throughout this chapter, we’ll explore the fundamentals of routing in React applications using react-router. We’ll start by creating a basic example route to familiarize ourselves with the syntax and structure of route declarations. Then, we’ll dive deeper into organizing routes by feature, rather than relying on a monolithic routing module. Finally, we’ll implement a common parent-child routing pattern to demonstrate how to handle more complex routing scenarios.

Hello route

Before...

Handling route parameters

The URLs that you’ve seen so far in this chapter have all been static. Most applications will use both static and dynamic routes. In this section, you’ll learn how to pass dynamic URL segments to your components, how to make these segments optional, and how to get query string parameters.

Resource IDs in routes

One common use case is to make the ID of a resource part of the URL. This makes it easy for your code to get the ID and then make an API call that fetches the relevant resource data. Let’s implement a route that renders a user detail page. This will require a route that includes the user ID, which then needs to somehow be passed to the component so that it can fetch the user.

Let’s start with the App component that declares the routes:

const router = createBrowserRouter([
  {
    path: "/",
    element: <UsersContainer />,
    errorElement: <p>Route not found</p>,
  },
  {
   ...

Using link components

In this section, you’ll learn how to create links. You might be tempted to use the standard <a> elements to link to pages controlled by react-router. The problem with this approach is that these links, in simple terms, will try to locate the page on the backend by sending a GET request. This isn’t what you want because the route configuration is already in the app and we can handle routes locally.

First, you’ll see an example that illustrates how <Link> components behave somewhat like <a> elements, except that they work locally. Then, you’ll see how to build links that use URL parameters and query parameters.

Basic linking

The idea of links in React apps is that they point to routes that point to components, which render new content. The Link component also takes care of the browser history API and looks up route-component mappings. Here’s an application component that renders two links:

function...

Summary

In this chapter, you learned about routing in React applications. The job of a router is to render content that corresponds to a URL. The react-router package is the standard tool for this job. You learned how routes are JSX elements, just like the components they render. Sometimes, you need to split routes into feature-based modules. A common pattern for structuring page content is to have a parent component that renders the dynamic parts as the URL changes. Then, you learned how to handle the dynamic parts of URL segments and query strings. You also learned how to build links throughout your application using the <Link> element.

Understanding routing in React applications lays the groundwork for building complex applications with efficient navigation, preparing you for the subsequent chapters that delve into performance optimization, state management, and integrating external APIs, ensuring a seamless user experience.

In the next chapter, you’ll learn...