āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/guides/development/declarative-mode ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<TutorialHero beforeYouStart={[ { title: "Set up a React + Clerk application", link: "/docs/react/getting-started/quickstart", icon: "react-router", } ]} />
React Router supports three different routing strategies, or "modes":
<Link>, useNavigate(), and useLocation().This guide will cover how to add React Router in declarative mode, assuming you have followed the React quickstart.
<Steps> ## Install `react-router` and `@clerk/react-router`Run the following command to install both React Router and the Clerk React Router SDK:
<CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>
bash {{ filename: 'terminal' }} npm install react-router @clerk/react-router
```bash {{ filename: 'terminal' }}
yarn add react-router @clerk/react-router
```
```bash {{ filename: 'terminal' }}
pnpm add react-router @clerk/react-router
```
```bash {{ filename: 'terminal' }}
bun add react-router @clerk/react-router
```
<SignedIn> Add your Clerk Publishable Key to your `.env` file. This key can always be retrieved from the [**API keys**](https://dashboard.clerk.com/~/api-keys) page of the Clerk Dashboard. </SignedIn> <SignedOut> 1. In the Clerk Dashboard, navigate to the [**API keys**](https://dashboard.clerk.com/~/api-keys) page. 1. In the **Quick Copy** section, copy your Clerk Publishable Key. 1. Add your key to your `.env` file.[!NOTE] You will not need the Clerk Secret Key in React Router's declarative mode, as it should never be used on the client-side.
The final result should resemble the following:
VITE_CLERK_PUBLISHABLE_KEY={{pub_key}}
<ClerkProvider>Update <ClerkProvider> to be imported from @clerk/react-router instead of @clerk/clerk-react.
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { ClerkProvider } from '@clerk/react-router'
import './index.css'
import App from './App.tsx'
// Import your Publishable Key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
if (!PUBLISHABLE_KEY) {
throw new Error('Add your Clerk Publishable Key to the .env file')
}
createRoot(document.getElementById('root')!).render(
<StrictMode>
<ClerkProvider publishableKey={PUBLISHABLE_KEY}>
<App />
</ClerkProvider>
</StrictMode>,
)
To use declarative mode, wrap your app in a <BrowserRouter>. To define your app's routes, add <Routes> and <Route> components. This example adds the / (home) route and renders the <App /> component when the URL matches. Read more about routing in the React Router docs.
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter, Routes, Route } from 'react-router'
import { ClerkProvider } from '@clerk/react-router'
import './index.css'
import App from './App.tsx'
// Import your Publishable Key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
if (!PUBLISHABLE_KEY) {
throw new Error('Add your Clerk Publishable Key to the .env file')
}
createRoot(document.getElementById('root')!).render(
<StrictMode>
<BrowserRouter>
<ClerkProvider publishableKey={PUBLISHABLE_KEY}>
<Routes>
<Route path="/" element={<App />} />
</Routes>
</ClerkProvider>
</BrowserRouter>
</StrictMode>,
)
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā