基于路由的条件组件渲染在Next.js中

Question

在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>
</>

- Naeem Ahmad

---

你能具体说明一下你的问题吗？你可以使用useRouter钩子返回的Router对象来获取查询变量。 https://nextjs.org/docs/api-reference/next/router - Leigh Cheri

我编辑了问题，现在更加具体了。 - Naeem Ahmad

你对这个问题有解决方案吗？根据URL路径，在另一个页面中有条件地渲染特定的组件吗？ - Seth Lutske

Answer 1

你的第二个例子的风格让人想起了React Router，所以我能理解你的想法。

然而，在Next.js中，基于文件系统的路由已经实现，路由是根据/pages目录中的文件名来处理的。

如果你在URL中处理许多不同的查询参数，Next.js也会处理它，使用动态路由。

从上面链接的文档中可以看到：

考虑以下页面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。匹配的路径参数将作为查询参数发送到页面，并与其他查询参数合并。

- giraffesyo

---

动态路由/[pid].js 根据 URL 渲染整个页面，但并不一定非要这样。我已经在我的许多页面中使用了它。只是我不知道如何根据 URL 在页面中渲染特定的组件（例如弹出框）。 - Naeem Ahmad