Handling 404 within existing catch-all route

Wondering what the pattern/best approach is for displaying a 404 page/component within a catch-all route.

Using solid start/<FileRoutes>, if I have a number of static file routes, and an [...index].tsx catch-all to handle the CMS routes. Can't have another catch-all (right?)

rough setup is:

// [...index].tsx

export default function Home(props: RouteSectionProps) {
  const data = createAsync(()=>getPageData(props.params.index))


  return (
    ...
  )

}

// [...index].tsx

export default function Home(props: RouteSectionProps) {
  const data = createAsync(()=>getPageData(props.params.index))


  return (
    ...
  )

}

// [...index].tsx

export default function Home(props: RouteSectionProps) {
  const data = createAsync(()=>getPageData(props.params.index))


  return (
    ...
  )

}

// [...index].tsx

export default function Home(props: RouteSectionProps) {
  const data = createAsync(()=>getPageData(props.params.index))


  return (
    ...
  )

}

Thought just using

<Show when={data()} fallback={<NotFound/>}>....

<Show when={data()} fallback={<NotFound/>}>....

<Show when={data()} fallback={<NotFound/>}>....

<Show when={data()} fallback={<NotFound/>}>.... but not sure if thats the right approach? Could throw an error in the getPageData function and it gets handled in an ErrorBoundary?

Handling 404 within existing catch-all route

Similar Threads

Similar Threads

Similar Threads