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

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

下一个js中基于路由的条件组件渲染

1 个答案: