Skip to main content

​
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.Néxudus.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): 
// 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

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>
}
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. 
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 – Host-level location resolution and bootstrapping (src/states/useLocationDomainContext.tsx).
  • LocationContext – The app wrapper that composes all providers (src/states/LocationContext.tsx).