From React in Action by Mark T. Thomas

This article is about routing in React: how it works and why it is important in modern front-end web apps.

Save 37% on React in Action. Just enter code fccthomas into the discount code box at checkout at manning.com.

What is routing?

To get into routing, we need an idea of what it is. Routing is a key part of all websites and web applications in one way or another. It plays a central role in static HTML pages as well as in the most complex React web applications. Routing comes into play whenever you want to use a URL in your application. Most applications are full of URL links because they’re the de facto way of moving around the web. We’re used to using physical address systems for navigation, which is like web-based routing with URLs.

 

Routing

Routing can have many different meanings and implementations. For our purposes, it’s a system for resource navigation. Even in the abstract, it’s a familiar idea common in web development. If you’re working in the browser, you might be familiar with routing as it relates to URLs and resources (paths to images, scripts, and so on), or on the server, matching incoming request paths (https://api.ifelse.io/users/1) to resources from a database. Routing usually mean matching components (the resource people want) to a URL (the way of telling the system what they want).

Routing is an important part of modern web applications. If want to build a web app that allows users to create custom fundraising pages to raise money for important causes, you’ll need routing for quite a few reasons, including:

  • In general, to allow people to provide external links to your web app
  • Public fundraising pages need to be reliably accessible by everyone, and you need a URL that’ll route them to the right page
  • Different parts of the admin interface require it. Users need to be able to move forward and backward in their browsing history
  • Different parts of your site need their own URL, allowing you to route people to the right section (for example, /settings, /profile, /pricing)
  • Breaking up your code by page helps promote modularity and lets you break up your app

Routing in modern front-end web applications

In the past, the basic architecture of a web application involved a different approach to routing than modern ones. The older approach involved the server (created in Python, Ruby, or, PHP) generating HTML markup and sending it to the browser. A user might fill out a form with some data, which is sent to the server to wait for a response. This was revolutionary in making the web more powerful because you could modify data instead of only viewing it.

 

Many developments have been made to web services’ design and construction. Nowadays, JavaScript frameworks and browser technology are advanced enough that web applications can have a more distinct client-server split. The client app (all in-browser) is sent by the server and then effectively “taken over.” The server is responsible for sending raw data, usually in the form of JSON. Figure 1 illustrates and compares how these two generic architectures work.

Figure 1 Comparing old and modern web application architectures. In the older way of doing things, dynamic content is generated on the server. The server fetched data from a database and used that data to populate an HTML view which was sent to the client. In the modern approach, more application logic on the client is managed by JavaScript (in our case, React). The server initially sends the HTML, JavaScript, and CSS assets, but after that the client React app takes over. From there, unless a user manually refreshes the page, the server sends raw JSON data.

Hopefully you now have a clearer understanding of how routing works in React.

For more information on React, check out the whole book on liveBook here and see this Slideshare Presentation.