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

---

title: Clerk React Router SDK description: The Clerk React Router SDK gives you access to prebuilt components, React hooks, and helpers to make user authentication easier. sdk: react-router

The Clerk React Router SDK gives you access to prebuilt components, React hooks, and helpers to make user authentication easier. Refer to the quickstart guide to get started.

Client-side helpers

Because the React Router SDK is built on top of the React SDK, you can use the hooks that the React SDK provides. These hooks include access to the Clerk object, User object, Organization object, and a set of useful helper methods for signing in and signing up. Learn more in the React SDK reference.

<Include src="_partials/hooks/hook-list" />

Server-side helpers

The following references show how to integrate Clerk features into applications using React Router server functions and API routes.

• getAuth()
• clerkMiddleware()
• rootAuthLoader()

React Router implementations

React Router can be integrated with Clerk in three ways:

• Framework mode (recommended): Configure your app using Clerk's React Router SDK.
• Declarative mode: Manually integrate React Router into your React + Vite app using declarative mode.
• Data mode: Use React Router's data APIs to load data and manage state in your Clerk app. To use React Router in data mode, see the demo repository.

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