║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: '<RedirectToUserProfile /> (deprecated)' description: The <RedirectToUserProfile /> component will navigate to the user profile URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack. sdk: nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue

[!WARNING] This feature is deprecated. Please use the redirectToUserProfile() method instead.

The <RedirectToUserProfile /> component will navigate to the Account Portal User Profile URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.

To find your User Profile URL:

1. In the Clerk Dashboard, navigate to the Account Portal page.
2. Under User profile, select the Visit icon.

Example

<If sdk="nextjs"> ```tsx {{ filename: 'app/page.tsx' }} import { SignedIn, SignedOut, RedirectToUserProfile } from '@clerk/nextjs'

function Page() { return ( <> <SignedIn> <RedirectToUserProfile /> </SignedIn> <SignedOut> <p>You need to sign in to view your user profile.</p> </SignedOut> </> ) }

</If>

<If sdk="react">
```tsx {{ filename: 'pages/index.tsx' }}
import { SignedIn, SignedOut, RedirectToUserProfile } from '@clerk/clerk-react'

export default function Page() {
  return (
    <>
      <SignedIn>
        <RedirectToUserProfile />
      </SignedIn>
      <SignedOut>
        <p>You need to sign in to view your user profile.</p>
      </SignedOut>
    </>
  )
}

</If> <If sdk="react-router"> ```tsx {{ filename: 'app/routes/home.tsx' }} import { SignedIn, SignedOut, RedirectToUserProfile } from '@clerk/react-router'

export default function Home() { return ( <> <SignedIn> <RedirectToUserProfile /> </SignedIn> <SignedOut> <p>You need to sign in to view your user profile.</p> </SignedOut> </> ) }

</If>

<If sdk="remix">
```tsx {{ filename: 'app/routes/_index.tsx' }}
import { SignedIn, SignedOut, RedirectToUserProfile } from '@clerk/remix'

export default function Index() {
  return (
    <div>
      <SignedIn>
        <RedirectToUserProfile />
      </SignedIn>
      <SignedOut>
        <p>You need to sign in to view your user profile.</p>
      </SignedOut>
    </div>
  )
}

</If> <If sdk="tanstack-react-start"> ```tsx {{ filename: 'app/routes/index.tsx' }} import { SignedIn, SignedOut, RedirectToUserProfile } from '@clerk/tanstack-react-start' import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({ component: Home, })

function Home() { return ( <div> <SignedIn> <RedirectToUserProfile /> </SignedIn> <SignedOut> <p>You need to sign in to view your user profile.</p> </SignedOut> </div> ) }

</If>

<If sdk="vue">
```vue {{ filename: 'App.vue' }}
<script setup lang="ts">
import { SignedIn, SignedOut, RedirectToUserProfile } from '@clerk/vue'
</script>

<template>
  <SignedIn>
    <RedirectToUserProfile />
  </SignedIn>
  <SignedOut>
    <p>You need to sign in to view your user profile.</p>
  </SignedOut>
</template>

</If> <If sdk="nuxt"> ```vue {{ filename: 'App.vue' }} <script setup lang="ts"> // Components are automatically imported </script> <template> <SignedIn> <RedirectToUserProfile /> </SignedIn> <SignedOut> <p>You need to sign in to view your user profile.</p> </SignedOut> </template> ``` </If>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║