下一个js中根据路由进行条件组件渲染

问题描述 投票:0回答:2

有没有办法在 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>
</>
reactjs react-router next.js router
2个回答
2
投票

你的第二个例子的风格让人想起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
匹配。匹配的路径参数将作为查询参数发送到页面,并将与其他查询参数合并。


0
投票

要根据 Next.js 中的路由有条件地渲染组件,您可以使用 next/router 中的 useRouter 钩子。这是一些实现:

  1. 导入必要的模块。
  2. 使用 useRouter 钩子来获取当前路由。
  3. 根据路由有条件地渲染组件。

这是代码:

import { useRouter } from 'next/router';
import dynamic from 'next/dynamic';
import SomeComponent from './SomeComponent';

const RenderThis = dynamic(() => import('./RenderThis'), {
  suspense: true,
});

const MyComponent = () => {
  const router = useRouter();

  return (
    <>
      <SomeComponent />
      {router.pathname === "/somePath" && (
        <React.Suspense fallback={<div>Loading...</div>}>
          <RenderThis />
        </React.Suspense>
      )}
    </>
  );
};

export default MyComponen

t;

© www.soinside.com 2019 - 2024. All rights reserved.