React Router Integration - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-react` v7.0.x
Peer deps	`react` >=18, `react-dom` >=18, `@cometchat/chat-sdk-javascript` ^4.1.9, `dompurify` ^3.3.1
Init	`CometChatUIKit.init(UIKitSettings)` — must resolve before `login()`
Login	`CometChatUIKit.login("UID")` — must resolve before rendering components
Order	`init()` → `login()` → render. Breaking this order = blank screen
Auth Key	Dev/testing only. Use Auth Token in production
CSS	`import "@cometchat/chat-uikit-react/styles";`
SSR	N/A — client-side SPA by default
Calling	Optional. Install `@cometchat/calls-sdk-javascript` to enable
Other frameworks	React.js · Next.js · Astro

This guide walks you through adding CometChat to a React Router app. By the end you’ll have a working chat UI with route-based navigation.

Prerequisites

You need three things from the CometChat Dashboard:

Credential	Where to find it
App ID	Dashboard → Your App → Credentials
Auth Key	Dashboard → Your App → Credentials
Region	Dashboard → Your App → Credentials (e.g. `us`, `eu`, `in`)

You also need Node.js 18+ and npm/yarn installed.

Auth Key is for development only. In production, generate Auth Tokens server-side via the REST API. Never ship Auth Keys in client code.

Step 1 — Create a React Project with React Router

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install react-router-dom

Step 2 — Install the UI Kit

npm
yarn

npm install @cometchat/chat-uikit-react @cometchat/chat-sdk-javascript dompurify

yarn add @cometchat/chat-uikit-react @cometchat/chat-sdk-javascript dompurify

If you want voice/video calling, also install:

npm install @cometchat/calls-sdk-javascript

Step 3 — Set Up Routes and Render

Create your route structure with a chat route. CometChatProvider handles init and login automatically. For development, use one of the pre-created test UIDs: cometchat-uid-1 · cometchat-uid-2 · cometchat-uid-3 · cometchat-uid-4 · cometchat-uid-5

src/main.tsx

import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

src/App.tsx

import { Routes, Route, Navigate } from "react-router-dom";
import ChatPage from "./pages/ChatPage";

function App() {
  return (
    <Routes>
      <Route path="/chat" element={<ChatPage />} />
      <Route path="*" element={<Navigate to="/chat" replace />} />
    </Routes>
  );
}

export default App;

src/pages/ChatPage.tsx

import { useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatProvider,
  CometChatConversations,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/styles";

export default function ChatPage() {
  const [chatUser, setChatUser] = useState<CometChat.User | undefined>();
  const [chatGroup, setChatGroup] = useState<CometChat.Group | undefined>();

  const handleConversationClick = (conversation: CometChat.Conversation) => {
    const entity = conversation.getConversationWith();
    if (conversation.getConversationType() === "user") {
      setChatUser(entity as CometChat.User);
      setChatGroup(undefined);
    } else {
      setChatGroup(entity as CometChat.Group);
      setChatUser(undefined);
    }
  };

  return (
    <CometChatProvider
      appId="YOUR_APP_ID"
      region="YOUR_REGION"
      authKey="YOUR_AUTH_KEY"
      uid="cometchat-uid-1"
    >
      <div style={{ display: "flex", height: "100vh" }}>
        <div style={{ width: 360, borderRight: "1px solid #eee" }}>
          <CometChatConversations onItemClick={handleConversationClick} />
        </div>
        <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
          {(chatUser || chatGroup) && (
            <>
              <CometChatMessageHeader user={chatUser} group={chatGroup} />
              <CometChatMessageList user={chatUser} group={chatGroup} />
              <CometChatMessageComposer user={chatUser} group={chatGroup} />
            </>
          )}
        </div>
      </div>
    </CometChatProvider>
  );
}

CometChatProvider handles init, login, and all context setup automatically. For advanced use cases (custom login flows, individual providers), see the CometChatProvider guide.

For production, use the authToken prop instead of authKey + uid. Generate auth tokens server-side via the CometChat REST API. Never ship auth keys in client code.

Step 4 — Run

npm run dev

Open http://localhost:5173/chat. You should see the conversation list on the left. Click a conversation to open the message panel.

Choose a Chat Experience

Conversation List + Message View

Two-panel layout — conversation list on the left, messages on the right.

One-to-One / Group Chat

Single chat window — no sidebar. Good for support chat or embedded widgets.

Tab-Based Chat

Tabbed navigation — Chat, Call Logs, Users, Settings in separate tabs.

Next Steps

Components Overview

Browse all prebuilt UI components

Theming

Customize colors, fonts, and styles

Plugins

Customize message rendering

Troubleshooting

Common issues and fixes

​Prerequisites

​Step 1 — Create a React Project with React Router

​Step 2 — Install the UI Kit

​Step 3 — Set Up Routes and Render

​Step 4 — Run

​Choose a Chat Experience

​Conversation List + Message View

​One-to-One / Group Chat

​Tab-Based Chat

​Next Steps

Components Overview

Theming

Plugins

Troubleshooting

Prerequisites

Step 1 — Create a React Project with React Router

Step 2 — Install the UI Kit

Step 3 — Set Up Routes and Render

Step 4 — Run

Choose a Chat Experience

Conversation List + Message View

One-to-One / Group Chat

Tab-Based Chat

Next Steps