Question

我使用的是MUI、打字器、 next子和新的指路器。

在模式开放时,我就劫持了浏览器背后纽子的行为,这样它就能够关闭模式,而不是进入浏览器上前页,这是流动用户的直觉行为。

请使用这一简化碎块以避免复杂性:

"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

你们需要背景路线

这里的例子有:

Source code: https://github.com/vercel/nextgram?tab=readme-ov-file

Demo app: https://nextgram.vercel.app/

官方出版物:

https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes

平行和拦截路线是它们特别为环境路线添加的新特征

You will need to

Create a modal route that intercepts your original route

Instead of opening your modal with state - navigate to the same route with Link on the client

// code inside of .../photo/id 

export default function YourPage() {
  return (
   <div>
     <nav>whatever</nav>
     <div>whatever</div>
     <Link href="/photo/id">
       open modal
     </Link>

   </div>
  )
}

and this will open the route on

.../@modal/photo/id

页: 1

友情链接