|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.
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 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,
- 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.
Hopefully you now have a clearer understanding of how routing works in React.