Pass props to component via navigation

I am building the registration flow of an application.

/register

/register

captures email + password

/verify

/verify

/verify

/verify captures the verification code that was sent via email

Currently I am navigating to

/verify

/verify

/verify

/verify via

const navigate = useNavigate();
navigate("/verify");

const navigate = useNavigate();
navigate("/verify");

const navigate = useNavigate();
navigate("/verify");

const navigate = useNavigate();
navigate("/verify");

The component which backs

/verify

/verify

/verify

/verify is currently defined as such

export default function VerifyEmail(props: {email: string}) {
  // component definition
}

export default function VerifyEmail(props: {email: string}) {
  // component definition
}

export default function VerifyEmail(props: {email: string}) {
  // component definition
}

export default function VerifyEmail(props: {email: string}) {
  // component definition
}

What is the best way to pass

email

email

from

/register

/register

/verify

/verify

/verify

/verify?

I saw it is possible to use path params as such:

const params = useParams();
params.email

const params = useParams();
params.email

const params = useParams();
params.email

const params = useParams();
params.email

but I would rather not have my URL look like this:

mywebsite.com/verify/some_user@gmail.com

mywebsite.com/verify/some_user@gmail.com

mywebsite.com/verify/some_user@gmail.com

mywebsite.com/verify/some_user@gmail.com

Is there a way to pass

email

email

in as props?