feat: improve component structure and addded signal managment. Extract Article page Content into a separate block. Added createSignal and CreateEffect to track slug dynamically. Replace ifelse with Switch and Match.

src/routes/[slug]/[...tab].tsx

@@ -1,6 +1,6 @@
 import { RouteDefinition, RouteSectionProps, createAsync, useLocation } from '@solidjs/router'
 import { HttpStatusCode } from '@solidjs/start'
-import { ErrorBoundary, Show, Suspense, createEffect, on, onMount } from 'solid-js'
+import { ErrorBoundary, Show, Suspense, createEffect, on, onMount, Switch, Match, createSignal } from 'solid-js'
 import { FourOuFourView } from '~/components/Views/FourOuFour'
 import { Loading } from '~/components/_shared/Loading'
 import { gaIdentity } from '~/config'
@@ -43,37 +43,16 @@ export type SlugPageProps = {
   topics: Topic[]
 }
 
-export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
-  if (props.params.slug.startsWith('@')) {
-    console.debug('[routes] [slug]/[...tab] starts with @, render as author page')
-    const patchedProps = {
-      ...props,
-      params: {
-        ...props.params,
-        slug: props.params.slug.slice(1, props.params.slug.length)
-      }
-    } as RouteSectionProps<AuthorPageProps>
-    return <AuthorPage {...patchedProps} />
-  }
-
-  if (props.params.slug.startsWith('!')) {
-    console.debug('[routes] [slug]/[...tab] starts with !, render as topic page')
-    const patchedProps = {
-      ...props,
-      params: {
-        ...props.params,
-        slug: props.params.slug.slice(1, props.params.slug.length)
-      }
-    } as RouteSectionProps<TopicPageProps>
-    return <TopicPage {...patchedProps} />
-  }
-
-  function ArticlePage(props: RouteSectionProps<ArticlePageProps>) {
+function ArticlePageContent(props: RouteSectionProps<ArticlePageProps>) {
   const loc = useLocation()
   const { t } = useLocalize()
-    const data = createAsync(async () => props.data?.article || (await fetchShout(props.params.slug)))
+  const data = createAsync(async () => {
+    const result = props.data?.article || (await fetchShout(props.params.slug))
+    return result
+  })
 
   onMount(async () => {
+    console.debug('[ArticlePage] onMount')
     if (gaIdentity && data()?.id) {
       try {
         await loadGAScript(gaIdentity)
@@ -127,6 +106,52 @@ export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
       </Suspense>
     </ErrorBoundary>
   )
-  }
-  return <ArticlePage {...props} />
+}
+
+export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
+  console.debug('[routes] [slug]/[...tab] props:', props)
+
+  const { slug } = props.params
+
+  const [currentSlug, setCurrentSlug] = createSignal(props.params.slug);
+  createEffect(() => {
+    if (props.params.slug !== currentSlug()) {
+      setCurrentSlug(props.params.slug);
+    }
+  });
+
+  return (
+    <Switch fallback={<div>Loading...</div>}>
+      <Match when={currentSlug().startsWith('@')}>
+        <AuthorPage
+          {...{
+            ...props,
+            params: {
+              ...props.params,
+              slug: slug.slice(1),
+            },
+          } as RouteSectionProps<AuthorPageProps>}
+        />
+      </Match>
+      <Match when={currentSlug().startsWith('!')}>
+        <TopicPage
+          {...{
+            ...props,
+            params: {
+              ...props.params,
+              slug: slug.slice(1),
+            },
+          } as RouteSectionProps<TopicPageProps>}
+        />
+      </Match>
+      <Match when={!currentSlug().startsWith('@') && !currentSlug().startsWith('!')}>
+        <ArticlePageContent {...props} />
+      </Match>
+      <Match when={true}>
+        <ErrorBoundary fallback={() => <HttpStatusCode code={404} />}>
+          <FourOuFourView />
+        </ErrorBoundary>
+      </Match>
+    </Switch>
+  )
 }