如何使用链接触发模式

Question

我的页面 (Next.js) 上有一个模态，它通过单击按钮触发：

<button type='button' onClick={() => setOpen(true)}>

模态：

<Modal
  id='demo'
  show={isOpen}
  onClose={() => setOpen(false)}
>

模态框默认隐藏。我想发送一个链接给客户。当客户点击链接时，他们将被带到模态打开的页面。是否有可能做到这一点？如何？非常感谢。

我尝试将 id 放在 URL 中，例如：https://example.com/contact#demo，但没有成功。我正在考虑使用查询标记（？），但不知道它是如何工作的。

Answer 1

如果 NextJS 与 react-dom 一起使用，那么您可以使用

useSearchParams

来自

react-router-dom

import { useSearchParams } from 'react-router-dom'
...
....
const MyComponent = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const q = searchParams.get('demo')

  return (
  )
}