React同一div容器内无路由切换时如何从Page2返回Page1组件

解决方案 #

核心思路是替换布尔类型的状态为多状态枚举，配合映射表渲染组件，彻底解决多组件切换时三元表达式冗余的问题，还可以配合栈结构实现轻量的返回上一级功能，不需要引入react-router。

方案1：枚举状态 + 组件映射表（适合简单的固定跳转场景） #

把原来的showForm布尔值换成代表当前页面的枚举值，后续新增页面只需要在映射表里加配置即可，逻辑清晰易维护：

import { useState } from 'react'

// 页面枚举值可根据需求扩展，加page4、page5都可以
const PAGE = {
  PAGE1: 'page1',
  PAGE2: 'page2',
  PAGE3: 'page3'
}

function YourComponent() {
  const [currentPage, setCurrentPage] = useState(PAGE.PAGE1)

  // 组件映射表，所有页面的渲染逻辑统一管理
  const renderPage = {
    [PAGE.PAGE1]: (
      <div className={styles.whitelistBox}>
        <Button 
          className={styles.whiteListToggleButton} 
          shape="round" 
          onClick={() => setCurrentPage(PAGE.PAGE2)}
        >
          Whitelist
        </Button>
      </div>
    ),
    [PAGE.PAGE2]: <Page2 
      onBack={() => setCurrentPage(PAGE.PAGE1)} 
      onGoPage3={() => setCurrentPage(PAGE.PAGE3)}
    />,
    [PAGE.PAGE3]: <Page3 onBack={() => setCurrentPage(PAGE.PAGE2)} />
  }

  return (
    <div className={styles.ticketBox}>
      {renderPage[currentPage]}
    </div>
  )
}

方案2：栈状态管理（适合需要通用返回上一级的场景） #

如果页面跳转逻辑复杂、不想手动写每个返回的目标页面，可以用栈结构存储历史页面，天然支持返回上一级能力，和路由的history逻辑一致：

import { useState } from 'react'

const PAGE = {
  PAGE1: 'page1',
  PAGE2: 'page2',
  PAGE3: 'page3'
}

function YourComponent() {
  // 用数组做栈，存储历史页面，初始值为首页
  const [pageStack, setPageStack] = useState([PAGE.PAGE1])
  // 当前页面取栈的最后一个元素
  const currentPage = pageStack.at(-1)

  // 跳转新页面：入栈
  const goPage = (targetPage) => {
    setPageStack(prev => [...prev, targetPage])
  }

  // 返回上一级：出栈（只剩首页时不触发返回）
  const goBack = () => {
    if (pageStack.length > 1) {
      setPageStack(prev => prev.slice(0, -1))
    }
  }

  const renderPage = {
    [PAGE.PAGE1]: (
      <div className={styles.whitelistBox}>
        <Button 
          className={styles.whiteListToggleButton} 
          shape="round" 
          onClick={() => goPage(PAGE.PAGE2)}
        >
          Whitelist
        </Button>
      </div>
    ),
    [PAGE.PAGE2]: <Page2 onBack={goBack} onGoPage3={() => goPage(PAGE.PAGE3)} />,
    [PAGE.PAGE3]: <Page3 onBack={goBack} />
  }

  return (
    <div className={styles.ticketBox}>
      {renderPage[currentPage]}
    </div>
  )
}

补充：如果要使用react-router也可以实现组件内路由 #

不需要页面级路由的话可以用MemoryRouter，它不会修改浏览器地址栏，完全在组件内部维护路由状态，适合嵌套组件内的多视图切换场景，也可以直接用useNavigate等路由能力。

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