NextJS侧边栏路由问题：点击链接仅显示对应组件

方法一：用单个状态管理当前激活标签（推荐） #

把原来两个独立的状态合并成一个，通过记录当前选中的标签来控制组件显示，逻辑更简洁，避免状态冲突：

修改DashBase组件的状态和切换逻辑：

const DashBase = () => {
  const isDesktop = useBreakpointValue({ base: false, lg: true })
  // 单个状态记录当前激活标签，初始null表示都不显示
  const [activeTab, setActiveTab] = React.useState(null)

  // 点击时切换激活状态，重复点击可关闭
  const toggleLibrary = () => setActiveTab(activeTab === 'library' ? null : 'library')
  const toggleTasks = () => setActiveTab(activeTab === 'tasks' ? null : 'tasks')
  const router = useRouter()

  return (
    <Flex>
      {isDesktop ? <Sidebar toggleLibrary={toggleLibrary} toggleTasks={toggleTasks} /> : <Navbar />}
      <Container py="8" flex="none">
        {/* 根据激活标签渲染对应组件 */}
        {activeTab === 'library' && <Library />}
        {activeTab === 'tasks' && <Tasks />}
      </Container>
    </Flex>
  )
}

方法二：修改原有切换函数，重置其他状态 #

如果不想大幅改动原有代码，可在切换时强制将另一个组件的显示状态设为false：

const DashBase = () => {
  const isDesktop = useBreakpointValue({ base: false, lg: true })
  const [showLibrary, setShowLibrary] = React.useState(false)
  const [showTask, setShowTask] = React.useState(false)

  // 点击Library时，先关闭Tasks，再切换Library状态
  const toggleLibrary = () => {
    setShowTask(false)
    setShowLibrary(!showLibrary)
  }
  // 点击Tasks时，先关闭Library，再切换Tasks状态
  const toggleTasks = () => {
    setShowLibrary(false)
    setShowTask(!showTask)
  }
  const router = useRouter()

  return (
    <Flex>
      {isDesktop ? <Sidebar toggleLibrary={toggleLibrary} toggleTasks={toggleTasks} /> : <Navbar />}
      <Container py="8" flex="none">
        {showLibrary ? <Library /> : '' }
        {showTask ? <Tasks /> : '' }
      </Container>
    </Flex>
  )
}

说明 #

• 方法一的优势是状态结构更清晰，后续新增侧边栏选项时，只需扩展activeTab的取值即可，维护成本更低。
• 方法二适合快速适配原有代码的场景，通过主动重置其他状态保证同一时间仅显示一个组件。

内容的提问来源于stack exchange，提问作者Mel