react-动态创建一个可自行移除的dialog，跳转到首页(解决useNavigate不能使用问题)

实现一个可移除的简易dialog，支持跳转单个页面

import { useRef } from "react"

export const DialogView = (props: {
    onClose: () => void
}) => {
    
    //这里面 useNavigate不能使用，由于没直接写到对应view中，没有办法获取到上下文
    //所以采用原生定位方式，定位到指定页面
    const jumpHome = () => {
        window.location.href = '/home' //定位到首页即可
        //顺便提一下另外两个
        //window.location.replace('/home') //替换当前页面，不留历史记录
        //window.location.refresh()//刷新当前页面，传递true可以不使用缓存，可以看情况使用
        props.onClose()
    }

    return (
        <div 
            id="dialog-view" 
            //设置全屏，用于弹窗的居中效果，也可以设置一个最小宽高，避免内容过度挤压
            //为了避免出现高度差问题，可以设置zIndex大一些
            style={{display:"flex", 
                justifyContent: 'center', alignItems: 'center', pointerEvents: 'auto',
                position: "fixed", left: 0, right: 0, top: 0, 
                bottom: 0,backgroundColor: 'rgba(0,0,0,0.6)'
            }}>
            <div 
                style={{display:"flex", justifyContent: 'center', 
                alignItems: 'center', backgroundColor: 'red'}}>
                <div 
                    style={{color: 'black', fontSize: 20}} 
                    onClick={jumpHome} >点击我跳转到首页</div>
            </div>
        </div>
    )
}

关键点：设置window.location.href，重新定位页面

动态添加到当前页面栈，一键调用弹出

import { createRoot } from 'react-dom/client'
import { DialogView } from "./index";

export const showDialog = () => {
  //获取root跟几点，可移除的dialog会追加到根节点最外层，dialogView也可以进一步设置zInde避免内容不在最外层显示问题
  const root = document.getElementById('root')
  if (!root) return
  //创建一个div容器用于显示我们的dialogView
  const container  = document.createElement('div')
  //追加到 root 子节点
  root.appendChild(container)
  //渲染显示即可
  createRoot(container).render(<DialogView onClose=() => {
      container.remove() //关闭后删掉该视图，要是alert、modal那种自己的弹窗，记得里面设置关闭
  }/>)
}

最后

这个可以用于登陆过期弹窗提示(401)，然后跳转到登陆页面，但是一般统一封装获取 context 上下文 会成为一个问题，因此可以使用上面逻辑，再设置当前定位窗口路径 window.location.href 即可，也别忘了window.location.replace()、window.location.refresh()哈

特点： 侵入性较低，使用方便