React Router | Novu Documentation

Quickstart

Before you can start integrating Novu into your application, you need to create a Novu account and set up a new workflow in the Novu Dashboard. This guide walks you through those steps.

Create a Novu account

If you don't have a Novu account, you can create one here.

Create a new React application

You can use the following command to create a new React application with Vite, or use your own and continue from the next step.

npm create vite@latest my-app -- --template react-ts

Install the required packages

package-install npm install @novu/react react-router-dom

Create the Inbox component

To start using the Inbox component, you need to embed it in your application. Import the <Inbox /> component and pass the applicationIdentifier and subscriberId to the component.

src/components/notification-center.tsx

import React from 'react';
import { Inbox } from '@novu/react';
import { useNavigate } from 'react-router';
 
export function NotificationCenter() {
  const navigate = useNavigate();
  
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
      routerPush={(path: string) => navigate(path)}
    />
  );
}

Set up React Router and add the Notification Center

Now you can set up React Router and add the NotificationCenter component to your app layout.

src/App.tsx

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { NotificationCenter } from './components/notification-center';
 
function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <nav>
        <NotificationCenter />
      </nav>
      {children}
    </div>
  );
}
 
function App() {
  return (
    <Router>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          {/* Add your routes here */}
        </Routes>
      </Layout>
    </Router>
  );
}
 
export default App;

Create your first subscriber

Novu will automatically create a subscriber when a new `subscriberId` was detected from the `Inbox` component props.

Start the development server

package-install npm run dev

Trigger your first notification

Now you have setup the Notification Center and created a subscriber, it's time to trigger your first notification workflow.
Visit Dashboard

Get started with Inbox using Novu and React Router

Quickstart

Next steps

Inbox and preferences UI components

Styling

Multi-tenancy

Localization

Environments

On this page