Navigation and page detection

Use these when a component needs to go somewhere, to know which page it is on, or when a loader needs to send the customer away or show a 404. For a plain link in markup, use Link.

All of them come from @salla.sa/twilight-theme-engine/providers.

ExampleCopy Anchor Link

import { useIsCart, useLocation, useNavigate } from '@salla.sa/twilight-theme-engine/providers';

export function CartShortcut() {
  const navigate = useNavigate();
  const isCart = useIsCart();
  const { pathname, search } = useLocation<{ q?: string }>();

  if (isCart) return null;
  return (
    <button onClick={() => navigate('/cart')} data-from={pathname} data-query={search.q}>
      Go to cart
    </button>
  );
}

In componentsCopy Anchor Link

Location has these fields:

Page checksCopy Anchor Link

Each returns true on the matching page, and re-renders when the page changes.

For any other page, compare useRouteId() with a constant:

import { RouteId, useRouteId } from '@salla.sa/twilight-theme-engine/providers';

const isWishlist = useRouteId() === RouteId.CUSTOMER_WISHLIST;

In loadersCopy Anchor Link

A loader runs before the page renders, outside React, so it cannot use hooks. Throw one of these instead. Each never returns.

import { notFound, orThrow, redirect, unauthorized } from '@salla.sa/twilight-theme-engine/providers';

if (!user) throw unauthorized();
if (moved) throw redirect('/ar/new-path', { statusCode: 301 });
const product = await orThrow(api.find(id)); // a 404 or 410 becomes notFound()

GotchasCopy Anchor Link

• Navigate with useNavigate or Link, never window.location. Assigning window.location reloads the whole page, and reading it breaks on the server.
• useLocation().search is an object, not text. Use searchStr when you need the raw ?a=b.
• Route ids are strings like product.single, not URL paths. Use RouteId rather than typing them.
• A product list is not a product page. A category and every /products?source=… list are RouteId.PRODUCT_INDEX (product.index); search results are RouteId.SEARCH. The old PRODUCT_INDEX_LATEST, PRODUCT_INDEX_SALES and PRODUCT_INDEX_OFFERS ids are only the page.slug of those lists now, so tell them apart with page.slug or source.type.

NextCopy Anchor Link

• Link: the markup version of navigation.
• Loading data and Routes and pages show loaders in context.
• Salla SDK and events: the route::changed event for reacting to navigation.