我有一个主页,其中有两个组件:导航栏和英雄。当用户登录并从主页重定向到仪表板时,我想隐藏此 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
提前致谢。
您可以使用 @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