在新的 NextJS approuter 中防止浏览器后退按钮转到 MUI 模式/对话框的上一页

Question

我正在使用 MUI、typescript、nextjs 和新的 approuter。

我想在模式打开时劫持浏览器的后退按钮行为，以便它会关闭模式而不是转到浏览器中的上一页，这是移动用户的直观行为。

请使用这个简化的样板以避免复杂性：

"use client"
import { Modal } from '@mui/material'
import { useState } from 'react'

export default function Component() {
    const [open, setOpen] = useState(false)

    return (
        <>
            <Modal
                open={open}
                onClose={() => setOpen(false)}
                style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
            >
                <div style={{ background: "white", padding: "100px" }}>
                    hi
                </div>
            </Modal>
            
            <button onClick={() => setOpen(true)}>
                open modal
            </button>
        </>
    )
}

Answer 1

我认为上下文路由就是您正在寻找的，这里是一个链接：

https://dev.to/toomuchdesign/contextual-routing-and-modal-routes-in-next-js-18fn

在路线上渲染模态框