Preserving Special Characters in Query Parameters: A React Journey

Introduction

In the world of web development, handling query parameters and URLs is a fundamental task. However, there are situations where special characters within these parameters can lead to unexpected challenges. One such issue I encountered involved the loss of special characters within a redirect_uri. In this article, I'll walk you through the problem, the solution, and how to implement it in your React application.

The Problem

Imagine you have a URL like this:

http://localhost:3001/en/auth/login?servicename=Grant&redirect_uri=http://localhost:3000/bsmrnt/buy-ticket?code=ETN&start_time=10:00:00

In this URL, the redirect_uri contains special characters, specifically the & symbol. When extracting this parameter in a React app using queryParams, you might run into issues as the & character separates query parameters.

The Initial Approach

My initial approach was to use the common method of extracting query parameters in React:

const queryParams = new URLSearchParams(window.location.search);
const redirectUri = queryParams.get('redirect_uri');

However, this approach resulted in redirectUri containing only part of the URL:

http://localhost:3000/bsmrnt/buy-ticket?code=ETN

As you can see, the &start_time=10:00:00 part is missing.

The Solution

To preserve the complete redirect_uri, I found a creative solution using JavaScript's regular expressions and window.location.href. Here's the code:

• We first obtain the complete URL using window.location.href.
• Then, we use a regular expression to extract the redirect_uri and capture everything that follows it.
• Finally, we ensure that we have the complete redirect_uri by checking both the regular expression match and the queryParams.

Implementation

To implement this solution in your React app, follow these steps:

1. Retrieve the currentURL and use the regular expression to capture the complete redirect_uri.

2. Use the captured redirectUri as needed in your application.

Here's a sample implementation inside a useEffect:

This ensures that you store the complete redirect_uri without losing any special characters.

Conclusion

Handling special characters in query parameters can be tricky, but with the right approach, you can ensure they are preserved. In this article, we explored a real-world problem and a creative solution using JavaScript and React. By implementing this technique, you can preserve the integrity of your URLs and provide a seamless user experience.

If you've ever struggled with lost query parameters, give this solution a try. Let's solve the mystery of preserving special characters in query parameters together!