redirect not work outside loader

[WreewanMorhee]

if I write this:

export const loader = async () => {
  if (condition) {
    return redirect('/my-route')
  }
}

this works !

But if I write this:

import myFunc from './myFunc'
export const loader = async () => {
  if (condition) {
    myFunc()
  }
}


/* myFunc.tsx */
export const myFunc = () => { 
   return redirect('/my-route')
}

then it won't redirect ...

Why will this happen?
redirect only work inside loader and cannot be wrapped outside ?
anyone encounter same problem ?

[jamalsoueidan]

Return the above statement.

export const loader = async () => {
  if (condition) {
    return myFunc(); // <<<<<<<<<<<
  }
}

[kiliman]

As @jamalsoueidan said, you needed to return the result from the function.

Another option is to throw redirect(). This way you don't have to do the return.

A typical pattern is to validate the user is logged in and redirect to the login page if not.

export async function loader({request}) {
  const userId = await requireUser(request)
  //...
}

async function requireUser(request) {
  const userId = await getUserId(request)
  if (!userId) {
    throw redirect('/login')
  }
  return userId
}

[jamalsoueidan]

@WreewanMorhee use throw, it will guarantee it will redirect from anywhere you call it inside loader, as @kiliman wrote.

[mhpjay422]

Is there a difference technically between the two?

I took a look at a bunch of work from @kentcdodds and he uses both:

throw redirect in error situations and

return redirect in all others

[sergiodxa]

Is there a difference technically between the two?

The redirect is the same, a Response instance with a redirect status code and the Location header.

The difference is that by throwing it the function will stop and the function that called it will also stop, and this will happen until the thrown value is caught, e.g.

export async function requireUser(request) {
  throw redirect("/login")
}

export async function loader({ request }) {
  let userId = await requireUser(request)
  // this will never run because requireUser throw
  return json({ userId })
}

This also means if you put the requireUser in a try/catch it will be caught

try {
  let userId = await requireUser(request)
  return json({ userId })
} catch (error) {
  if (error instanceof Response) throw error
  console.error(error)
}

So in case you wrap your code throwing redirects in a try/catch you will need to check if the thrown value is a Response instance and throw it or return it again.

Another thing to consider is that if you return a redirect the type of useLoaderData<typeof loader>() fails (or used to fail), but because TS consider all thrown values as unknown and there's no way to get them by throwing a redirect TS ignore those responses and can correctly type the loader data.

[mhpjay422]

Thanks! Makes sense. It is a return or throw at the end. Having the Response being the subject was "throwing" me off