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/clerk-react
Run the following command to install both React Router and the Clerk React Router SDK:
npm install react-router @clerk/clerk-reactpnpm add react-router @clerk/clerk-reactyarn add react-router @clerk/clerk-reactbun add react-router @clerk/clerk-reactUpdate <ClerkProvider>
Move <ClerkProvider /> to its own component.
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { ClerkProvider } from '@clerk/clerk-react'
import './index.css'
import App from './App.tsx'
function RootLayout() {
return (
<ClerkProvider>
<App />
</ClerkProvider>
)
}
createRoot(document.getElementById('root')!).render(
<StrictMode>
<RootLayout />
</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.
The useNavigate() hook from react-router is used by Clerk components for navigation events. This will prevent flicker and app reloading.
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter, Routes, Route, useNavigate } from 'react-router'
import { ClerkProvider } from '@clerk/clerk-react'
import './index.css'
import App from './App.tsx'
function RootLayout() {
const navigate = useNavigate()
return (
<ClerkProvider
routerPush={(to) => navigate(to)}
routerReplace={(to) => navigate(to, { replace: true })}
>
<Routes>
<Route path="/" element={<App />} />
</Routes>
</ClerkProvider>
)
}
createRoot(document.getElementById('root')!).render(
<StrictMode>
<BrowserRouter>
<RootLayout />
</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-in-or-up page
Learn how to add a custom sign-in-or-up page to your React Router app with Clerk's components.
Protect content and read user data
Learn how to use Clerk's hooks to protect content and read user data in your React 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