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 app with Clerk's components.
Read user data
Learn how to use Clerk's hooks to 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