Add React Router to your Clerk + React application
Before you start
React Router supports three different routing strategies, or "modes":
- Declarative mode: Enables basic routing features like matching URLs to components, navigating around the app, and providing active states with APIs like
<Link>,useNavigate(), anduseLocation(). - Data mode: Adds data loading, actions, pending states and more with APIs like loader, action, and useFetcher. To use React Router in data mode, see the demo repository. A guide is coming soon.
- Framework mode: Use React Router as a framework to build your entire app. To use React Router as a framework instead, see the React Router quickstart.
This guide will cover how to add React Router in declarative mode, assuming you have followed the React quickstart.
Install react-router and @clerk/react-router
Run the following command to install both React Router and the Clerk React Router SDK:
npm install react-router @clerk/react-routerpnpm add react-router @clerk/react-routeryarn add react-router @clerk/react-routerbun add react-router @clerk/react-routerAdd your Clerk to your .env file.
- In the Clerk Dashboard, navigate to the API keys page.
- In the Quick Copy section, copy your Clerk .
- Paste your key into your
.envfile.
The final result should resemble the following:
VITE_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEYUpdate <ClerkProvider>
Update <ClerkProvider> to be imported from @clerk/react-router instead of @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>,
)Set up React Router
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>,
)Next steps
Learn more about Clerk components, how to use them to create custom pages, and how to use Clerk's client-side helpers using the following guides.
Create a custom sign-up page
Learn how to add a custom sign-up page to your React Router app with Clerk's components.
Protect content and read user data
Learn how to use Clerk's hooks and helpers to protect content and read user data in your React Router app.
Client-side helpers
Learn more about Clerk's client-side helpers and how to use them.
Prebuilt components
Learn how to quickly add authentication to your app using Clerk's suite of components.
Feedback
Last updated on