如何在React中不使用location state创建可路由Modal组件

核心思路 #

把模态框对应为独立的路由路径，通过嵌套路由+路由匹配优先级控制模态渲染，不需要透传任何location state，刷新页面时模态状态也能完全保留。

具体实现步骤 #

以下示例基于React Router v6实现，核心逻辑可适配其他前端路由框架

• 第一步：重构路由结构，给需要挂载模态的页面路由增加children配置，模态路由作为子路由存在，路径直接用独立标识即可

// 路由配置示例
const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      { path: "", element: <HomePage /> },
      // 列表页父路由
      { 
        path: "list", 
        element: <ListPage />,
        children: [
          // 模态子路由，路径独立设置即可
          { path: "detail/:id", element: <DetailModal /> }
        ]
      }
    ]
  }
])

• 第二步：在父页面组件中预留Outlet作为模态的渲染插槽，不需要修改父页面原有业务逻辑

// ListPage组件示例
import { Outlet, Link } from 'react-router-dom'

function ListPage() {
  return (
    <div className="list-page">
      {/* 原有列表业务内容 */}
      <div className="list-content">
        {list.map(item => (
          // 跳转直接用普通Link，不需要传递任何state参数
          <Link key={item.id} to={`/list/detail/${item.id}`}>
            查看{item.name}详情
          </Link>
        ))}
      </div>
      {/* 模态渲染插槽，路由匹配到子路由时自动渲染对应模态 */}
      <Outlet />
    </div>
  )
}

• 第三步：封装Modal组件，内置路由退出逻辑，点击关闭或者蒙层时直接调用路由回退方法即可

// DetailModal组件示例
import { useNavigate, useParams } from 'react-router-dom'

function DetailModal() {
  const { id } = useParams()
  const navigate = useNavigate()
  const handleClose = () => {
    // 回退到上一级父路由即可关闭模态，不需要传任何状态
    navigate(-1)
    // 也可以直接写死跳转父路径：navigate('/list')
  }

  return (
    <div className="modal-mask" onClick={handleClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        <button onClick={handleClose}>关闭</button>
        <div>当前详情ID：{id}</div>
      </div>
    </div>
  )
}

• 第四步：补充模态的CSS样式，固定定位蒙层覆盖全屏即可，不需要额外维护显示状态变量，路由匹配到模态子路由自动渲染，匹配不到自动消失

方案优势 #

• 完全不依赖location state，刷新页面、分享链接都能保持模态正常显示
• 不需要额外维护模态的显示/隐藏状态，所有状态由路由统一管控
• 浏览器前进后退可以正常控制模态的开启关闭，符合通用交互习惯

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