Replace the & by & in url

[victorvianaom]

Hi there!

It might be a noob question, but in a Button component like bellow:

<Button href={`${confirmationBasePath}?code=${code}&email=${email}&flow=${flow}`}>
    Verify email
</Button>

the url gets rendered as http://localhost:3000/setup?code=CODE&email=victor%40email.com&flow=signup, that is with the & in place of the & query string delimiter.
Is it possible to make it be rendered as & instead of & ??

[gabrielmfern]

Thinking this is a bug, is this when you send the email? Do you know what rendering function you are using here?

[victorvianaom]

Thanks for the fast reply. This is in the string which is the output of the fuction renderAsync .
I'm using renderAsync, but the render produces the same result. Indeed, I only changed to the async one to test if the output would be different.
I didn't check how it would look like in UI yet because I'm facing the error #1258 .

import { Button, renderAsync } from "@react-email/components";

export interface ConfirmEmailSignUpEmailProps {
  code: string;
  email: string;
  flow: string;
  confirmationBasePath: string;
}

const ConfirmEmailSignUp = ({
  code,
  email,
  flow,
  confirmationBasePath,
}: ConfirmEmailSignUpEmailProps) => {
  return (
    <Button
      href={`${confirmationBasePath}?code=${code}&email=${email}&flow=${flow}`}
    >
      Verify email
    </Button>
  );
};

export const renderConfirmEmailSignUpEmail = (
  props: ConfirmEmailSignUpEmailProps
) =>
  renderAsync(ConfirmEmailSignUp(props));

export default ConfirmEmailSignUp;

[victorvianaom]

By the way, about the issue #1258 , I just moved the export of the function renderConfirmEmailSignUpEmail to other file and the "TextDecoder" error disapears.

[victorvianaom]

Yeah, it might not be a bug, now I can see the UI and the url is as I expected, with the & character.

Thanks!