SolidJS•3y ago

Access dynamic route params in components outside of the FileRouter

In this structure:

 <Body class="h-full bg-slate-900 text-slate-300">
        <ErrorBoundary>
          <Suspense fallback={<div>Loading</div>}>
            <O_header />

            <Routes>
              <FileRoutes />
            </Routes>
            <O_Footer></O_Footer>
          </Suspense>
        </ErrorBoundary>
        <Scripts />
      </Body>

 <Body class="h-full bg-slate-900 text-slate-300">
        <ErrorBoundary>
          <Suspense fallback={<div>Loading</div>}>
            <O_header />

            <Routes>
              <FileRoutes />
            </Routes>
            <O_Footer></O_Footer>
          </Suspense>
        </ErrorBoundary>
        <Scripts />
      </Body>

I need the header to render the following:

              <A href={

              <A href={

/${params.lang}/sign_in

} class="navAction">

} class="navAction">

where lang is derived from this url http://localhost:3000/en

however params.lang is undefined unless its inside a route

import { createServerData$, redirect } from 'solid-start/server';

export function routeData() {
  return createServerData$((_, { request }) => {
    // TODO parse accept-language header
    throw redirect('/en');
  });
}

export default function Index() {
  return <div>Redirecting...</div>;
}

import { createServerData$, redirect } from 'solid-start/server';

export function routeData() {
  return createServerData$((_, { request }) => {
    // TODO parse accept-language header
    throw redirect('/en');
  });
}

export default function Index() {
  return <div>Redirecting...</div>;
}