Skip to content
Twilight React Playground
ثيم رائدaren

TanStackNavigationProvider

providerAdvanced

Deprecated: connects the engine's navigate and Link to TanStack Router. TwilightProvider now does this itself, with locale handling this one lacks.

import { TanStackNavigationProvider } from '@salla.sa/twilight-theme-engine/tanstack';

In plain words

Older themes wrapped their pages in TanStackNavigationProvider so that the engine's Link and useNavigate() used TanStack Router. TwilightProvider now sets this up on its own (its client prop is { framework: 'tanstack' } by default), so new code never needs it. Remove it where you find it.

Signature

/** @deprecated Use NavigationSetup instead (TwilightProvider mounts it) */
function TanStackNavigationProvider(props: { children: ReactNode }): JSX.Element
// NavigationProvider with navigate = (to, opts) => useNavigate()({ to, replace: opts?.replace })
// + LinkProvider with adapter = TanStackLinkAdapter

Example

app/routes/__root.tsx (migration, excerpt)
import { Outlet } from '@tanstack/react-router';
import { TwilightProvider } from '@salla.sa/twilight-theme-engine';
import themeTranslations from 'virtual:twilight/theme-translations';

// Before (deprecated):
//   import { TanStackNavigationProvider } from '@salla.sa/twilight-theme-engine/tanstack';
//   <TwilightProvider translations={themeTranslations}>
//     <TanStackNavigationProvider>
//       <Outlet />
//     </TanStackNavigationProvider>
//   </TwilightProvider>

// After: TwilightProvider sets up navigation and links on its own.
export function ShellBody() {
  return (
    <TwilightProvider translations={themeTranslations}>
      <Outlet />
    </TwilightProvider>
  );
}

How it behaves

  • Importing anything from /tanstack runs configureNavigation(), which makes the engine's redirect(), notFound() and unauthorized() throw TanStack's redirect and not-found objects. That happens whether or not you use this component.

Gotchas

  • Its navigate does not add the current locale. Mounted inside TwilightProvider it replaces the provider's setup for everything below it, so on an English page of a multilingual store useNavigate()('/cart') lands on /ar/cart: the route matches without a locale and the locale wrapper redirects to the fallback, ar. Remove the wrapper.

Related

NavigationProvider

Supplies the function useNavigate() returns to everything below it; TwilightProvider mounts one for TanStack Router, and tests can mount their own.

LinkProvider

Tells the engine's Link which real anchor component to render; TwilightProvider supplies TanStack Router's, and tests can supply a plain one.

TanStackLinkAdapter

The anchor behind the engine's Link under TanStack Router: it adds the current language to internal paths and passes intent preloading on.

Source and docs