What is Routing?

Introduction to routing

In a modern website or web app, all the content can’t be on a single page. Instead, we must provide a way to navigate the user through different parts of the website by routing.

There are many different definitions for routing. In this lesson, we’re only using routing definitions meant for web development.

What is routing in web development?

Routing is one of the most critical aspects of web applications. Let’s explore it with a straightforward example.

Example: Consider a big building with four ongoing workshops on separate floors. The first floor is hosting a front-end development workshop, and the others have back-end, dev-ops, and blockchain development workshops.

When someone arrives at the building, they tell the receptionist which workshop they wish to attend. The receptionist then directs them to that workshop.

In the above example, the receptionist represents a router who handles the visitors’ requests by sending them to the workshop they wish to attend. We can therefore say that routing is a mechanism that handles client requests by sending them to a particular code, UI, function, page, component, or server.

Example: Let’s say we want to use Walmart’s online store, https://www.walmart.com, to buy a laptop.

• In the search tab, we type “laptop.” Note that when we hit “Enter,” the URL has changed to https://www.walmart.com/search?q=laptop. The UI has changed as well. We can now see a list of laptops available for sale.
• If we click on any of the laptops, we’ll be redirected to another page that displays the details of that laptop. The URL will also change to something like this: https://www.walmart.com/ip/laptop-name.

Based on this example, we can also say that routing is a map between the URL (website address) path and the various functionalities of a web app.

In the above diagram, when a user requests the Twitter website, the browser connects the user with twitter.com. Then, based on the URL, the router finds the relevant component (in this case, the homepage) and renders it at the URL twitter.com/home.

Why is routing essential in web development?

When we build an extensive website that contains multiple pages and functionalities, it becomes more complex to manage and render them all. If the data size is significant, it also takes more time to load from the server.

To tackle the increasing complexity of web applications, we can divide this large problem into several smaller problems, solve them separately, and recombine them. Routing provides a way to do this.

Conclusion

Routing must be implemented in a complex website with multiple pages. It increases the performance of the website by only loading small parts of the website at a time at different URLs.

Routing allows us to accomplish the following:

• Structure the web app to be easy to manage, read, and implement.
• Navigate through the web application.
• Decide what should happen when the user clicks on a link.