React中如何通过onClick点击事件在新页面渲染目标组件

React初学者编写代码时，通过useState声明布尔状态控制渲染逻辑，希望点击按钮后在新页面/新窗口展示UpdateProducts组件，但实际运行时组件始终在当前同页面加载。
原有实现代码如下：

const [changetoupdateproduct , setchangetoupdateproduct] = useState(false)

return(
     <div>
      <Button color='success' onClick={()=> setchangetoupdateproduct(true)}>Update</Button>
      {changetoupdateproduct===true ? <UpdateProducts /> : null}
     </div>
)

当前使用的条件渲染逻辑，本质是在当前页面的组件DOM树中插入UpdateProducts对应的节点，仅能实现同页挂载/卸载组件的效果，不会触发页面跳转或新窗口打开行为。

根据需求分两种常见场景处理：

场景1：站内跳转新页面展示（单页应用常规路由切换，不打开新浏览器窗口） #

这是业务开发中最常用的场景，需要配合React路由库（如react-router-dom）实现：

• 先为UpdateProducts组件配置独立的路由路径，例如/products/update
• 删除原有控制组件显隐的布尔状态、以及对应的三元渲染判断代码
• 将按钮点击逻辑替换为路由跳转，示例代码：

import { useNavigate } from 'react-router-dom'

function ProductOperatePage() {
  const navigate = useNavigate()

  return(
    <div>
      <Button color='success' onClick={() => navigate('/products/update')}>
        Update
      </Button>
    </div>
  )
}

点击按钮后就会跳转到独立的更新产品页面，不会在当前页嵌入组件。

场景2：点击打开全新浏览器窗口/标签页展示组件 #

如果需要在新的浏览器窗口打开内容，同样需要先给UpdateProducts配置独立路由地址，点击按钮时通过window.open打开对应路径即可，示例代码：

<Button 
  color='success' 
  onClick={() => window.open('/products/update', '_blank')}
>
  Update
</Button>

注意：不推荐直接操作新窗口的原生document手动插入React组件，这种方式会丢失React应用的全局上下文、样式、状态依赖，极易出现运行异常，走路由跳转的方式兼容性和稳定性最好。

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