Fundamentals of Routing

Routing is essential in web development, allowing us to determine displayed content or components based on the current URL. In the context of Single-Page Applications (SPAs), where a single HTML page is loaded initially, and content is dynamically updated, routing becomes even more crucial.

Note

To address this need, React Router has emerged as the leading library for managing routing in SPAs, providing a powerful solution for seamless navigation and dynamic content updates.

Before we delve into the usage of the library, we need to solidify our understanding of what a URL is and its various parts.

URL Structure

A URL (Uniform Resource Locator) is a string that specifies the address of a resource on the internet. It consists of several components:

• scheme: It specifies the resource's access protocol, such as http://, https://, ftp://, etc.
• domain: It identifies the server or host that hosts the resource (e.g., example.com).
• port: (optional) It specifies the network port number to connect to the server. The default ports are 80 for HTTP and 443 for HTTPS.
• path: It represents the specific location or path on the server where the resource is located. (e.g., /products/123 indicates a path to a particular product with ID 123).
• query: (optional) It consists of key-value pairs separated by ampersands (&). The query string is used to pass additional data to the server or application. (e.g., ?category=electronics&sort=price might represent search filters).
• fragment: (optional) It refers to a specific section within a resource, typically an HTML anchor tag (<a>). Fragments are often used to navigate within a page or target specific content.

Example

Let's consider the following real-world example to ensure that we understand all the parts, as we need this knowledge to construct the URLs in our apps.

• https:// - protocol
• vitali.com/ - host
• razor/3r2xe2fs - path where we are situated in the app
• ? - symbol that specifies the beginning of the query string
• cat=sharp&stat=left - query string
  • cat=sharp - parameter=value pair
  • stat=left - parameter=value pair
  • & - symbolize "AND", separates parameters of the query string
• #chars - fragment, anchor to the specific section on the page.