Next.js中基于url的条件呈现类

6yoyoihd 于 2023-02-19 发布在其他

关注(0)|答案(2)|浏览(159)

我试图根据它是“主页”还是URL中包含“docs”（例如docs/1，docs/2，docs/3）的页面来显示不同的导航。我只是在“docs”上得到了空白-情况下-感觉我在这里错过了什么？
下面是我的代码：

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

next.js

来源：https://stackoverflow.com/questions/72949460/conditional-render-classes-based-on-url-in-next-js

2条答案

按热度按时间

t1rydlwq1#

NextJS有一个内置的导航系统，你可以在pages文件夹中创建一个docs.js文件，你可以直接在/pages/docs. js中创建不同的导航，也可以为它创建一个动态组件。
以下是有关路由https://nextjs.org/docs/routing/introduction的详细信息
希望这能回答你的问题：）

赞(0）回复(0）举报 2023-02-19

7cjasjjr2#

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

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进行测试

赞(0）回复(0）举报 2023-02-19

我来回答

Next.js中基于url的条件呈现类

2条答案

相关问题

热门标签

最新问答