React

Router Adapters

Most apps don't need these — the core SDK already detects route changes via history patching. Use these adapters for routers with non-standard navigation or for explicit control.

When you need an adapter#

Reliable's core SDK auto-detects route changes by patching history.pushState, history.replaceState, and listening for popstate. This works for nearly every modern router (React Router, Next.js, Vue Router, TanStack Router) with zero adapter code.

Adapters become useful when:

You want explicit, declarative control over which navigations are recorded.
Your router uses a non-standard navigation primitive that doesn't go through history.
You're tracking a search-params-only change that history patching catches but you want to format a different way.

useReliableRouter — generic#

Pass any pathname string. The hook adds a navigation breadcrumb whenever the value changes (skipping the initial mount, which is already covered by the SDK's session-start logic).

React Router v6#

tsx

import { useLocation } from 'react-router-dom';
import { useReliableRouter } from '@reliableapp/react';

function ReliableRouterSync() {
  const { pathname, search } = useLocation();
  useReliableRouter(pathname + search);
  return null;
}

// Place inside your <BrowserRouter>
<BrowserRouter>
  <ReliableRouterSync />
  <Routes>{/* ... */}</Routes>
</BrowserRouter>

Next.js App Router#

tsx

'use client';
import { usePathname, useSearchParams } from 'next/navigation';
import { useReliableRouter } from '@reliableapp/react';

export function ReliableRouterSync() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const fullPath = pathname + (searchParams.toString()
    ? '?' + searchParams.toString()
    : '');

  useReliableRouter(fullPath);
  return null;
}

// In app/layout.tsx
<ReliableProvider config={{ publicKey: 'pk_live_rl_...' }}>
  <ReliableRouterSync />
  {children}
</ReliableProvider>

Next.js Pages Router#

The Pages Router exposes a router events API; use the dedicated adapter instead.

tsx

import { useRouter } from 'next/router';
import { useReliableNextPagesRouter } from '@reliableapp/react';

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();
  useReliableNextPagesRouter(router);
  return <Component {...pageProps} />;
}

TanStack Router#

tsx

import { useRouter } from '@tanstack/react-router';
import { useReliableRouter } from '@reliableapp/react';

function ReliableRouterSync() {
  const router = useRouter();
  useReliableRouter(router.state.location.pathname);
  return null;
}

Auto-capture is usually enough

If your router uses the History API (and almost all of them do), the SDK already records navigations correctly without these adapters. Only reach for the adapter if you've verified that auto-capture isn't picking up your routes — or if you specifically want to exclude or reformat the captured paths.

Hooks

React

Sampling

Advanced