nextjs - 💡(How to fix) Fix useSearchParams() doesn't work if the parameter value contains +, the plus character gets replace by a space [6 comments, 4 participants]

TL;DR

The issue can be worked around by manually decoding the search parameter using decodeURIComponent to preserve the plus character.

Guidance

• The useSearchParams function is likely decoding the search parameter using a mechanism that replaces plus characters with spaces, which is a standard behavior for URL decoding.
• To verify this, try logging the search parameter using decodeURIComponent to see if it preserves the plus character.
• As a workaround, consider using decodeURIComponent to decode the search parameter manually, like this: decodeURIComponent(searchParams.get('search')).
• Be aware that this workaround may have implications for other characters in the search parameter, so test thoroughly to ensure it meets your requirements.

Example

import { useSearchParams } from 'next/navigation';

function MyComponent() {
  const [searchParams] = useSearchParams();

  const search = decodeURIComponent(searchParams.get('search'));
  console.log(search);
}

Notes

This workaround assumes that the plus character is the only character being replaced incorrectly. If other characters are being replaced, a more complex solution may be needed.

Recommendation

Apply workaround: using decodeURIComponent to manually decode the search parameter is a reasonable solution, as it allows for precise control over how the parameter is decoded.