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

Question

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

编辑：

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

const router = useRouter();

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

我想知道这种条件渲染是否有 better/cleaner 方法？喜欢...

<>
  <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中基于路由的条件组件渲染

Conditional component render based on route in next js

router

reactjs

react-router

next.js