routeData params are empty but not useParams

I am using the basic

<FileRoutes />

<FileRoutes />

<FileRoutes />

<FileRoutes /> setup and I have a file located at

routes/stuff/[slug].tsx

routes/stuff/[slug].tsx

routes/stuff/[slug].tsx

routes/stuff/[slug].tsx.

When I read

params.slug

params.slug

params.slug

params.slug from

useParams

useParams

useParams

useParams, I can read it properly, but when I try to do

useRouteData

useRouteData

useRouteData

useRouteData with an exported

routeData

routeData

routeData

routeData function in the same file, the

params

params

params

params field of

args: RouteDataArgs

args: RouteDataArgs

args: RouteDataArgs

args: RouteDataArgs is empty :/

Here's a minimum repro:

import { RouteDataArgs, useParams, useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";

export function routeData({ params }: RouteDataArgs) {
  return createServerData$(() => {
    return params;
  });
}

export default function Stuff() {
  const params = useParams();
  const routeData = useRouteData();
  return (
    <main>
      <p>{`params: ${params.slug}`}</p>
      <p>{`routeData: ${routeData.slug}`}</p>
    </main>
  );
}

import { RouteDataArgs, useParams, useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";

export function routeData({ params }: RouteDataArgs) {
  return createServerData$(() => {
    return params;
  });
}

export default function Stuff() {
  const params = useParams();
  const routeData = useRouteData();
  return (
    <main>
      <p>{`params: ${params.slug}`}</p>
      <p>{`routeData: ${routeData.slug}`}</p>
    </main>
  );
}

import { RouteDataArgs, useParams, useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";

export function routeData({ params }: RouteDataArgs) {
  return createServerData$(() => {
    return params;
  });
}

export default function Stuff() {
  const params = useParams();
  const routeData = useRouteData();
  return (
    <main>
      <p>{`params: ${params.slug}`}</p>
      <p>{`routeData: ${routeData.slug}`}</p>
    </main>
  );
}

import { RouteDataArgs, useParams, useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";

export function routeData({ params }: RouteDataArgs) {
  return createServerData$(() => {
    return params;
  });
}

export default function Stuff() {
  const params = useParams();
  const routeData = useRouteData();
  return (
    <main>
      <p>{`params: ${params.slug}`}</p>
      <p>{`routeData: ${routeData.slug}`}</p>
    </main>
  );
}

I'm sure it's something really silly, but I have tried so many different combinations of things and I can't get it to work...

routeData params are empty but not useParams

Similar Threads

Similar Threads

Similar Threads