MCPcopy Index your code
hub / github.com/TanStack/router / RootComponent

Function RootComponent

examples/react/navigation-blocking/src/main.tsx:19–113  ·  view source on GitHub ↗
()

Source from the content-addressed store, hash-verified

17})
18
19function RootComponent() {
20 // block going from editor-1 to /foo/123?hello=world
21 const { proceed, reset, status } = useBlocker({
22 shouldBlockFn: ({ current, next }) => {
23 if (
24 current.routeId === '/editor-1' &&
25 next.fullPath === '/foo/$id' &&
26 next.params.id === '123' &&
27 next.search.hello === 'world'
28 ) {
29 return true
30 }
31 return false
32 },
33 enableBeforeUnload: false,
34 withResolver: true,
35 })
36
37 return (
38 <>
39 <div className="p-2 flex gap-2 text-lg">
40 <Link
41 to="/"
42 activeProps={{
43 className: 'font-bold',
44 }}
45 activeOptions={{ exact: true }}
46 >
47 Home
48 </Link>{' '}
49 <Link
50 to="/editor-1"
51 activeProps={{
52 className: 'font-bold',
53 }}
54 >
55 Editor 1
56 </Link>{' '}
57 <Link
58 to={'/editor-1/editor-2'}
59 activeProps={{
60 className: 'font-bold',
61 }}
62 >
63 Editor 2
64 </Link>{' '}
65 <Link
66 to="/foo/$id"
67 params={{ id: '123' }}
68 search={{ hello: 'world' }}
69 activeProps={{
70 className: 'font-bold',
71 }}
72 activeOptions={{ exact: true, includeSearch: true }}
73 >
74 foo 123
75 </Link>{' '}
76 <Link

Callers

nothing calls this directly

Calls 1

useBlockerFunction · 0.90

Tested by

no test coverage detected