在next js 13服务器端组件中显示特定页面的隐藏组件

Question

我有一个主页，其中有两个组件：导航栏和英雄。当用户登录并从主页重定向到仪表板时，我想隐藏此 Hero 组件并使其仅对主页可见。我所做的，是寻找一种通过过滤当前 url 来隐藏此组件的方法。我使用 useRouter 钩子来获取当前页面 url，它给了我一个错误 - 你有一个导入 next/router 的服务器组件。请改用下一个/导航。我使用了与建议相同的方法，但现在没有获取当前页面网址，并且在主页上收到此错误 - 错误：无法读取未定义的属性（读取“路径名”）

整个想法是隐藏除主页之外的所有页面的此组件，因此请建议我如何获得相同的更好的方法。以下是我使用过的代码。

import { useRouter } from 'next/navigation'

export const Header = (props) => {
  const router = useRouter();
  //console.log(router.pathname);

  if(router.pathname != "/" )
    return (
        <>
          <header className={props.classes}>
          <Navbar />
          <Hero />
          </header>
        </>
    )
    else {
      return (
        <>
          <header className={props.classes}>
          <Navbar />
          </header>
        </>
    )
    }
}


export default Header

提前致谢。

Answer 1

您可以使用 @nimpl/getters 为此：

import { getPathname } from '@nimpl/getters/get-pathname'

export const Header = (props) => {
  const pathname = getPathname()

  if(pathname != "/" )
    return (
        <>
          <header className={props.classes}>
          <Navbar />
          <Hero />
          </header>
        </>
    )
    else {
      return (
        <>
          <header className={props.classes}>
          <Navbar />
          </header>
        </>
    )
    }
}


export default Header