#基础 API

function NavigationComponent() {
  const navigate = useNavigate()

  return (
    <>
      <button onClick={() => navigate('/')}>首页</button>
      <button onClick={() => navigate('/products', { relative: false })}>
        产品
      </button>
      <button onClick={() => navigate('/login', { replace: true })}>
        登录
      </button>
      <button onClick={() => navigate('/details', { noScroll: true })}>
        查看详情（不滚动）
      </button>
      <button onClick={() => navigate('/search?q=zess&page=1')}>
        搜索 Zess（第1页）
      </button>
    </>
  )
}

function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams()
  const handleFilterChange = (category) => {
    setSearchParams({ category })
  }
  const resetFilters = () => {
    setSearchParams({ category: undefined })
  }

  return (
    <div>
      <p>当前筛选条件: {searchParams.category || '全部'}</p>
      <button onClick={() => handleFilterChange('electronics')}>
        电子产品
      </button>
      <button onClick={() => handleFilterChange('clothing')}>服装</button>
      <button onClick={resetFilters}>重置</button>
    </div>
  )
}

function FormEditor() {
  const [hasUnsavedChanges, setHasUnsavedChanges] = useSignal(false)
  useBeforeLeave((event) => {
    if (hasUnsavedChanges()) {
      const confirmed = window.confirm('您有未保存的更改。确定要离开吗？')
      if (!confirmed) {
        event.preventDefault()
      }
    }
  })

  return (
    <div>
      <input type="text" onChange={() => setHasUnsavedChanges(true)} />
      <button onClick={() => setHasUnsavedChanges(false)}>保存</button>
    </div>
  )
}