如何在React中定义“取消”按钮关闭整个React应用而不关闭浏览器窗口

window.close() 会直接关闭当前浏览器标签/窗口，不符合需求，可根据你对“关闭应用”的实际场景选择对应逻辑： #

场景1：彻底卸载React应用（清空所有渲染内容，销毁React实例） #

这种方案会完全移除React渲染的所有内容，仅保留浏览器当前页面的空白状态（适用于应用直接挂载在页面根节点的场景）

React 18+ 版本实现 #

首先需要在应用入口文件中将根实例暴露到全局：

// main.jsx / main.tsx 入口文件
import { createRoot } from 'react-dom/client'
const root = createRoot(document.getElementById('root'))
root.render(<App />)
// 暴露根实例到全局
window.reactRoot = root

按钮onClick替换为：

onClick={() => window.reactRoot.unmount()}

React 17及更早版本实现 #

无需提前暴露实例，直接调用卸载API即可：

onClick={() => {
  import('react-dom').then(ReactDOM => {
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  })
}}

场景2：重置应用到初始状态（保留React实例，回到登录/入口页） #

如果你的“关闭应用”是指清空用户操作状态、退出到应用初始页，参考以下逻辑（以react-router v6为例）：

// 组件内先引入路由钩子
import { useNavigate } from 'react-router-dom'

function YourComponent() {
  const navigate = useNavigate()

  return (
    <Button 
      onClick={() => {
        // 清空所有用户相关存储
        localStorage.clear()
        sessionStorage.clear()
        // 若使用Redux等全局状态管理，此处调用重置全局状态的方法
        // 跳转到登录页/应用入口页，替换历史记录避免回退
        navigate('/login', { replace: true })
      }}
      className={buttonClassses.join(' ')} 
      size="large" 
      variant="contained" 
      color="secondary"
    >
      {props.cancel}
    </Button>
  )
}

场景3：React应用内嵌在iframe中，关闭iframe保留父页面 #

如果你的应用是嵌入在其他父页面的iframe内，使用以下逻辑移除当前iframe即可：

onClick={() => {
  const currentIframe = window.frameElement
  currentIframe && currentIframe.parentNode.removeChild(currentIframe)
}}

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