Dynamic Route Being Called Twice

Okay, this is kind of weird. I am encountering a weird error in my

islands/:id

islands/:id

islands/:id

islands/:id route (see image for file structure). This should be pretty straightforward. When you navigate to

www.mysite.com/islands/some-id

www.mysite.com/islands/some-id

www.mysite.com/islands/some-id

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>
  );
}

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

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()

getIslandById()

getIslandById()

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.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.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.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.

Screen_Shot_2024-03-16_at_9.21.06_PM.png

Dynamic Route Being Called Twice

Similar Threads

Similar Threads

Similar Threads