SolidJS•3mo ago

Pass props to component via navigation

I am building the registration flow of an application. /register captures email + password /verify captures the verification code that was sent via email Currently I am navigating to /verify via

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

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

The component which backs /verify is currently defined as such

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 from /register to /verify? I saw it is possible to use path params as such:

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 Is there a way to pass email in as props?

4 Replies

kalesin•3mo ago

In my opinion, the cleanest approach is to pass the address via search params. Don’t forget to encode special characters such as @, +, ., etc.:

// /register
navigate(`/verify?email=${encodeURIComponent(email)}`);

// /register
navigate(`/verify?email=${encodeURIComponent(email)}`);

// /verify
const [search] = useSearchParams();
const email = search.get("email");

// /verify
const [search] = useSearchParams();
const email = search.get("email");

hannus•3mo ago

I think you can use an action which throw a redirect to a route where you need to avoid passing parameters in client.

Madaxen86•3mo ago

You can absolutely pass search params or route params to a action’s redirect. Search params is probably the cleanest way. @FatFreeButter Other options would be e.g. wrap the routes in a layout which provides a signal or store via context to all routes within. And then just access the context in the verify route. But refreshing the browser on that route would mean losing the data. Not the case with search params. Side search params are serialised to an object not a set.

const [s,setS] = useSearchParams<TypeForm>()
s.email

const [s,setS] = useSearchParams<TypeForm>()
s.email

note: https://docs.solidjs.com/solid-router/reference/primitives/use-search-params

useSearchParams -

Documentation for SolidJS, the signals-powered UI framework

FatFreeButterOP•3mo ago

Thanks! Before seeing these responses, I went ahead and tried useLocation(), and since the email is lost on page refresh, I wrapped the email verification component in a <Show when={email!=""} fallback={...}> verification component </Show> where fallback is a page that shows and error message and automatically redirects to the registration page. It works, but after reading your comments, I think using search params is much nicer. I can still utilize <Show when={email!=""} fallback={...}> verification component </Show>, but the likelihood of actually hitting the fallback is smaller when using search params as email is preserved on page refresh and back buttons.

Gaming

Programming

Pass props to component via navigation

Did you find this page helpful?