Next.js 中基于 url 的条件渲染类答案

【问题标题】：Conditional render classes based on url in Next.jsNext.js 中基于 url 的条件渲染类
【发布时间】：2023-02-17 01:43:07
【问题描述】：

我试图根据它是“主页”还是在其 URL 中包含“文档”（例如 docs/1、docs/2、docs/3）的页面来显示不同的导航。我只是在“文档”案例上一片空白——感觉我在这里遗漏了什么？

到目前为止，这是我的代码：

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

【问题讨论】：

这很可能是因为这些路由的路径不是 /docs/。你有没有试过这样的东西：if (path.includes('/docs') { ... }？
谢谢，“包含”成功了！
跟进这个，看看是否有人有任何指导。下面这个工作得很好： let isDocs = router.pathname.includes('/docs') 但是后来我决定添加一个语言文件夹，这样新的 url 就变成了 en/docs 并且： let isDocs = router.pathname.includes('/ en/docs') 但这似乎打破了整个事情。任何可能导致它停止工作的建议或指导？
router.pathname.includes('/docs') 即使在路径中使用语言环境也仍然有效。

标签： next.js

【解决方案1】：

NextJS 有一个内置的路由系统。您可以在 pages 文件夹中创建一个 docs.js 文件。您可以直接在 /pages/docs.js 中创建不同的导航，也可以为其创建一个动态组件。

这里有更多关于路由https://nextjs.org/docs/routing/introduction

希望这能回答您的问题 :)

【讨论】：

感谢您的回复！我在帖子中可能有点不清楚，当我提到“导航”时，我指的是不同的标题。所以，如果有意义的话，我想根据 URL 显示不同的类 :)
没问题！您是否检查过实际返回的路径？该路径可能只是“/docs”而不是“/docs/”。

【解决方案2】：

我不确定您是否已修复此问题，但我已使用以下代码完成了相同的方法：

import { useRouter } from 'next/router';

const ComponentName = () => {
    const router = useRouter();
    const { pathname } = router;
    if (pathname.includes('/')) {
       // Add home component
    } else {
       // Add another component instead
    }
}
export default ComponentName

然后您可以使用条件语句来检查路径就像您正在做的那样。

- 使用 Next JS V13 测试

【讨论】：