如何在React.js中实现锁定提示模态框，拦截直接修改URL的页面访问

你遇到的场景核心是要做全局层面的路由访问控制，只在点击事件里校验只能覆盖交互跳转的场景，直接改URL触发的路由加载不会走点击事件，所以需要在路由加载的生命周期里加校验逻辑，常见可行方案如下：

1. 全局路由守卫（最推荐，适配所有路由跳转场景） #

不管是react-router v5还是v6版本，都可以通过封装统一的权限校验路由组件，把所有需要做访问控制的路由都用该组件包裹，组件内部自动做权限校验，不满足条件就弹出提示、拦截页面渲染。
以react-router v6为例的实现代码：

// 封装页面锁定校验组件
const RequireUnlockedPage = ({ children }) => {
  const [isLocked, setIsLocked] = useState(false)
  const [showLockModal, setShowLockModal] = useState(false)
  const navigate = useNavigate()

  useEffect(() => {
    // 调用你自己的权限校验逻辑：比如判断当前时间段、页面锁定状态、用户权限等
    const checkPageAccess = async () => {
      const currentPageLockStatus = await getPageLockRule()
      setIsLocked(currentPageLockStatus)
      if (currentPageLockStatus) {
        setShowLockModal(true)
        // 可选：自动跳转回上一页或者首页，避免用户停留在空白路由
        navigate(-1)
      }
    }
    checkPageAccess()
  }, [navigate])

  // 页面锁定时直接返回拦截逻辑，不渲染目标页面内容
  if (isLocked) {
    return <>
      {showLockModal && <AccessLockTipModal onClose={() => setShowLockModal(false)} />}
      <Navigate to="/" replace />
    </>
  }
  // 权限校验通过再渲染目标页面
  return children
}

// 路由配置时用上面的组件包裹受限路由即可
const router = createBrowserRouter([
  // 公共路由正常配置
  { path: '/', element: <HomePage /> },
  // 受限路由用校验组件包裹
  {
    path: '/products/:id',
    element: <RequireUnlockedPage><ProductDetailPage /></RequireUnlockedPage>
  }
])

如果使用的是react-router v5，可以用相同逻辑封装PrivateRoute组件实现，效果完全一致。

2. 全局路由变化监听 #

如果你不想改造现有路由结构，可以在根组件里统一监听路由地址变化，每次路由更新时自动匹配受限路由规则，命中规则且页面处于锁定状态就弹出提示。
实现示例：

import { useLocation } from 'react-router-dom'

const App = () => {
  const location = useLocation()
  const [showLockModal, setShowLockModal] = useState(false)

  useEffect(() => {
    // 配置你需要拦截的路由规则，比如示例中的/products/[数字id]格式的路由
    const restrictedRouteRule = /^\/products\/\d+$/
    if (restrictedRouteRule.test(location.pathname)) {
      // 校验当前页面是否处于锁定状态
      const pageIsLocked = checkCurrentPageLockStatus()
      if (pageIsLocked) {
        setShowLockModal(true)
        // 可配合路由替换操作，避免用户停留在受限路由地址
      }
    }
  }, [location.pathname])

  return (
    <>
      {/* 原有应用路由渲染逻辑 */}
      <AllRoutes />
      {/* 全局锁定提示模态框 */}
      {showLockModal && <LockTipModal onClose={() => setShowLockModal(false)} />}
    </>
  )
}

3. 页面组件内前置校验 #

如果你的应用里受限页面数量很少，也可以直接在受限页面组件的最开头加校验逻辑，组件挂载时先判断锁定状态，不满足就弹出提示、返回空内容。缺点是如果后续受限页面增多，会出现大量重复逻辑，维护成本较高。

注意事项 #

前端路由拦截只是用户体验层面的防护，只能阻止普通用户的直接访问，如果涉及敏感数据，一定要在后端接口层面也做对应权限校验，避免用户通过调试工具绕过前端限制获取数据。

以上方案都会在路由加载时自动触发校验，不管是用户点击按钮跳转，还是直接在地址栏修改URL，都会被拦截，你可以保留原有按钮点击的前置校验逻辑，提前给用户反馈，体验会更好。

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