Next.js 13 中使用条件渲染：如何在特定页面显示特定内容

假设您在 layout.tsx 文件中有一个 div 元素，包含一个 PrintButton 组件，您希望它只在 [...slug].tsx 页面中显示。可以使用条件渲染来实现这一点。

代码示例：

1. 在 layout.tsx 文件中：

<section>
  <TopButton />
  <div className='print'><PrintButton /></div>
</section>

2. 在 [...slug].tsx 文件中：

import Layout from '../components/layout';

export default function MyPage() {  
  return (  
    <Layout>  
      {/* 其他页面内容 */}
      <div className='print'><PrintButton /></div>
    </Layout>
  );
}

解释：

在 [...slug].tsx 页面中，我们通过在 Layout 组件内部添加一个 div 元素来显示 PrintButton 组件。这个 div 元素是在 [...slug].tsx 页面中特有的，不会影响其他页面。

总结：

通过在特定页面中添加条件语句，您可以控制不同组件或内容在不同页面中的显示与隐藏。这可以有效地提升您的 Next.js 应用程序的灵活性和可维护性。