Conditional render classes based on url in Next.js

I'm trying to show different navigations based on if it is the "Homepage" or if it is a page that contains "docs" (e.g. docs/1, docs/2, docs/3) in its URL. I'm just getting blanks on the "docs"-case - it feels like I am missing something here?

Here's my code so far:

const router = useRouter()
const path = router?.asPath

if (path === '/docs/') {
  return (
    <>
      <Head>
        <title>{pageTitle}</title>
        {description && <meta name="description" content={description} />}
      </Head>
      <Layout
        navigation={navigation1}
        title={title}
        tableOfContents={tableOfContents}
      >
        <Component {...pageProps} />
      </Layout>
    </>
  )
}
if (path === '/') {
  return (
    <>
      <Head>
        <title>{pageTitle}</title>
        {description && <meta name="description" content={description} />}
      </Head>
      <Layout
        navigation={navigation}
        title={title}
        tableOfContents={tableOfContents}
      >
        <Component {...pageProps} />
      </Layout>
    </>
  )
}