SolidJS•3mo ago

Dynamic Route Being Called Twice

Okay, this is kind of weird. I am encountering a weird error in my islands/:id route (see image for file structure). This should be pretty straightforward. When you navigate to www.mysite.com/islands/some-id, it should load data based on the ID in the URL. Here is page code:

export default function IslandPage() {
  const params = useParams();
  console.log(`Param: ${JSON.stringify(params)}`);
  const [island] = createResource<Island | null, string>(
    params.id,
    async (source) => {
      return await getIslandById(source);
    },
  );
  return (
    <main class="p-2 lg:p-8">
      <ErrorBoundary fallback={(e: Error) => <h1>{e.message}</h1>}>
        <Suspense>
          <Show when={island()} fallback={<Post>Island not found</Post>}>
            <Post title={island()!.name}>
              <p>Details for island {island()!.name}</p>
            </Post>
          </Show>
        </Suspense>
      </ErrorBoundary>
    </main>
  );
}

export default function IslandPage() {
  const params = useParams();
  console.log(`Param: ${JSON.stringify(params)}`);
  const [island] = createResource<Island | null, string>(
    params.id,
    async (source) => {
      return await getIslandById(source);
    },
  );
  return (
    <main class="p-2 lg:p-8">
      <ErrorBoundary fallback={(e: Error) => <h1>{e.message}</h1>}>
        <Suspense>
          <Show when={island()} fallback={<Post>Island not found</Post>}>
            <Post title={island()!.name}>
              <p>Details for island {island()!.name}</p>
            </Post>
          </Show>
        </Suspense>
      </ErrorBoundary>
    </main>
  );
}

However, I am getting this weird behavior where the route is being loaded twice: the first is correct, loads the data using the correct id... but then its somehow called again with the value of the id param being... my logo.svg file? Here's the log output from that component:

Param: {"id":"3969cb18-2dc5-4224-a1a9-4ea078a8126c"}
Searching for id 3969cb18-2dc5-4224-a1a9-4ea078a8126c
Param: {"id":"logo.svg"}
Searching for id logo.svg

Param: {"id":"3969cb18-2dc5-4224-a1a9-4ea078a8126c"}
Searching for id 3969cb18-2dc5-4224-a1a9-4ea078a8126c
Param: {"id":"logo.svg"}
Searching for id logo.svg

The "Searching for id ...." log is coming from the getIslandById() call in my resource fetcher, which is passed the

params.id1 value. 

Any help as to what I did wrong would be appreciated. I have no idea why its randomly assigning my site logo filename to

params.id`... Or, why its being called twice for that matter.

1 Reply

Je Suis Un Ami•3mo ago

Oh wait. Fixed it. ust a screw up on my end. My bad.

Gaming

Programming

Dynamic Route Being Called Twice