Course Content
Expert React
Expert React
4. Formik
6. Next Steps
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 ashttp://
,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 are80
for HTTP and443
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 ID123
).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://
- protocolvitali.com/
- hostrazor/3r2xe2fs
- path where we are situated in the app?
- symbol that specifies the beginning of the query stringcat=sharp&stat=left
- query stringcat=sharp
- parameter=value pairstat=left
- parameter=value pair&
- symbolize "AND", separates parameters of the query string
#chars
- fragment, anchor to the specific section on the page.
Everything was clear?