> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nexudus.com/llms.txt
> Use this file to discover all available pages before exploring further.

# useLocationByRouteContext

> How to scope API calls and business context by the :webAddress route parameter.

# useLocationByRouteContext

`useLocationByRouteContext` is a React hook that exposes the current Business context and scoped HTTP clients based on the `:webAddress` route parameter. If the parameter is present, the hook resolves the matching business and returns an `httpClient` bound to that business. If it’s absent, it falls back to the host-level location context.

It’s designed for multi-location portals where you can deep-link to a specific business (e.g. `/london/bookings`, `/new-york/events`).

## What you get

The hook returns the following shape:

* `Id: number` – The current business ID
* `WebAddress: string` – The current business web address
* `httpClient: HttpClient` – An Axios-like client scoped to the current business (`https://{WebAddress}.spaces.Nexudus.com`)
* `apiClient: HttpClient` – An API root client (base `apiBaseUrl` from app config)
* `business: Business` – The full business record fetched from `endpoints.system.business`

## Provider and placement

This hook must be used inside `LocationByRouteProvider` (and within a `<Suspense>` boundary, because data loading uses Suspense):

```tsx theme={null}
// src/states/LocationContext.tsx
export const LocationContext = (props: { children: ReactElement }) => {
  return (
    <Suspense fallback={<Preloader />}>
      <LocationByRouteProvider>
        <AuthProvider>
          <LocationSettingsProvider>
            <CSSLoaderComponent url="/api/styles/styles.css">
              <ModalProvider>{props.children}</ModalProvider>
            </CSSLoaderComponent>
          </LocationSettingsProvider>
        </AuthProvider>
      </LocationByRouteProvider>
    </Suspense>
  )
}
```

If you use the app’s default `LocationContext` wrapper, you’re already covered.

## How it works

* Reads `:webAddress` from React Router (`useParams()`). Routes define it as `/:webAddress` or nested via `:webAddress/*`.
* If present, fetches `GET /api/sys/businesses/getByHost?host={webAddress}` using the root `apiClient`.
* Builds a business-scoped `httpClient = ApiHttpClient(WebAddress)` and copies auth headers from the host context (`httpClient.defaults.headers = hostContext.httpClient.defaults.headers`) to keep the user session.
* Fetches the full `business` via `endpoints.system.business` using the scoped `httpClient`.
* Uses `useSuspenseFetch(..., { includeHeaders: false })` so auth header changes don’t bust the cache.
* If `:webAddress` is missing, it falls back to the host-level location from `useLocationByHostContext`.

Source: `src/states/useLocationByRouteContext.tsx` (provider and hook) and `src/states/LocationContext.tsx` (composition).

## Usage examples

### Make business-scoped API calls

```tsx theme={null}
import { useLocationByRouteContext } from '@/states/useLocationByRouteContext'

export function TeamProfile() {
  const { httpClient, business } = useLocationByRouteContext()

  // Call an endpoint scoped to the current business
  // e.g. httpClient.get('/api/teams')
  // ... render using `business` fields as needed

  return <div>Current business: {business.Name}</div>
}
```

### Deep-link between businesses

Ensure your routes include `:webAddress` and build links with it. When a user navigates, the hook will re-resolve the business and swap the scoped `httpClient` for you.

```tsx theme={null}
import { Link, useParams } from 'react-router-dom'

export function SwitchBusinessLink({ toWebAddress }: { toWebAddress: string }) {
  const params = useParams()
  return (
    <Link to={`/${toWebAddress}/bookings`} state={{ from: params.webAddress }}>
      Go to {toWebAddress}
    </Link>
  )
}
```

## Routing contract

* Define routes with `:webAddress`, for example:
  * `path: '/:webAddress'`
  * or nested: `<Route path=":webAddress/*" element={<App />} />`
* When the param is present, the context will re-scope to that business; otherwise it uses the host context.

Related code: `src/routes/index.tsx` and `src/routes/HomeRouter.tsx`.

## Edge cases and errors

* Hook usage outside its provider throws: `useLocationByRouteContext must be used within an LocationByRouteContext`.
* Data loading is Suspense-based; components must render under a `<Suspense>` boundary.
* If a `:webAddress` does not resolve to any business, the underlying fetch may trigger your Suspense fallback or error boundary depending on the response. Consider wrapping route segments with an error boundary where appropriate.
* Authentication headers are mirrored from the host context each render so sessions persist across business switches.

## See also

* [useLocationByHostContext](/developers/state/use-location-by-host-context) – Host-level location resolution and bootstrapping (`src/states/useLocationDomainContext.tsx`).
* [LocationContext](/developers/state/location-context) – The app wrapper that composes all providers (`src/states/LocationContext.tsx`).