next js 中基于路由的条件组件渲染

Posted 2023-02-22

【中文标题】next js 中基于路由的条件组件渲染

【英文标题】：Conditional component render based on route in next js

【发布时间】：2021-05-11 09:09:02

【问题描述】：

有没有办法根据 next.js 中的 URL 有条件地渲染组件？

编辑：

好像现在，我正在这样做：

const router = useRouter();

return (
  <>
    <SomeComponent />
    router.pathname === "/somePath" && <RenderThis />
  </>
)

我想知道这种条件渲染是否有更好/更清洁的方法？喜欢...

<>
  <SomeComponent />
  <Route path="/additionalUrl" component=RenderThis />
</>

//or

<>
  <SomeComponent />
  <Route path="/additionalUrl">
     <RenderThis />
  </Route>
</>

【问题讨论】：

您的问题能具体一点吗？您可以使用 useRouter 钩子返回的 Router 对象来获取查询变量。 nextjs.org/docs/api-reference/next/router

我编辑了这个问题。现在更具体了。

【参考方案1】：

第二个示例的风格让人想起 React Router，所以我可以看到你来自哪里。

但是，在 Next.js 中，实现了基于文件系统的路由，并根据 /pages 目录中的文件名为您处理路由。

如果您在 URL 中处理许多不同的查询参数，Next.js 也会使用 dynamic routes 来处理它

来自以上链接的文档：

考虑以下页面pages/post/[pid].js：

import  useRouter  from 'next/router'

const Post = () => 
  const router = useRouter()
  const  pid  = router.query

  return <p>Post: pid</p>


export default Post

/post/1、/post/abc等任何路由都会被pages/post/[pid].js匹配。匹配的路径参数将作为查询参数发送到页面，并与其他查询参数合并。

【讨论】：

动态路由 /[pid].js 是否根据 url 呈现整个页面。我已经在我的许多页面中使用了它。我只是不知道如何根据 url 读取页面中的特定组件（弹出等）。