How to use redirect from @remix-run/node

Question

I'm attempting to create a simple redirect from the root path / to /welcome using redirect from @remix-run/node.

The directory structure is:

routes/
├── index.tsx
└── welcome/
    └── index.tsx

This approach works fine:

import Welcome from '~/routes/welcome/index'
export default <Welcome />

I was hoping for this to work:

import { redirect } from '@remix-run/node'
export default () => redirect('/welcome')

However that results in Error: Objects are not valid as a React child (found: [object Response]).

Other posts suggest using throw redirect however that doesn't seem to work in this case.

The Remix documentation infers the use of the action function, however this seems to only return the default component and doesn't run the action:

import { redirect } from '@remix-run/node'
export function action() {
  return redirect('/welcome')
}
export default () => null

I have a good fallback but curious to know if redirect can be used in this fashion.

Stackblitz reproduction: https://stackblitz.com/edit/node-jlmr12?file=app/routes/index.tsx

Answer 1

Redirects can only be made from loaders and actions since these are server functions. The default export is only used for the UI.

// index.tsx
export const loader = () => redirect('/welcome')