有没有办法在 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>
</>
你的第二个例子的风格让人想起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
匹配。匹配的路径参数将作为查询参数发送到页面,并将与其他查询参数合并。
要根据 Next.js 中的路由有条件地渲染组件,您可以使用 next/router 中的 useRouter 钩子。这是一些实现:
这是代码:
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;