📦 cloudflare / vinext

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60"use client";

import { usePathname, useSearchParams } from "next/navigation";

/**
 * Test page for shallow routing via history.pushState/replaceState.
 *
 * Uses window.history.pushState() and replaceState() directly
 * to update the URL without full navigation. Verifies that
 * usePathname() and useSearchParams() react to these changes.
 */
export default function ShallowTestPage() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  return (
    <main>
      <h1>Shallow Routing Test</h1>
      <p data-testid="pathname">pathname: {pathname}</p>
      <p data-testid="search">search: {searchParams.toString()}</p>

      <button
        data-testid="push-filter"
        onClick={() => {
          window.history.pushState(null, "", "/shallow-test?filter=active");
        }}
      >
        Push filter=active
      </button>

      <button
        data-testid="replace-sort"
        onClick={() => {
          window.history.replaceState(null, "", "/shallow-test?sort=name");
        }}
      >
        Replace sort=name
      </button>

      <button
        data-testid="push-path"
        onClick={() => {
          window.history.pushState(null, "", "/shallow-test/sub");
        }}
      >
        Push /shallow-test/sub
      </button>

      <button
        data-testid="push-combined"
        onClick={() => {
          window.history.pushState(null, "", "/shallow-test?a=1&b=2");
        }}
      >
        Push combined params
      </button>
    </main>
  );
}