Skip to content

Commit 8f5d93b

Browse files
Shreyas-SarkarShreyas-Sarkar
authored
fix: Links always scroll to URL hash on hover (#5930) (#5944)
1 parent 3a14ffc commit 8f5d93b

File tree

8 files changed

+631
-7
lines changed

8 files changed

+631
-7
lines changed

‎e2e/react-router/basic-file-based/src/routeTree.gen.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { Route as rootRouteImport } from './routes/__root'
1212
import { Route as RemountDepsRouteImport } from './routes/remountDeps'
1313
import { Route as PostsRouteImport } from './routes/posts'
1414
import { Route as NotRemountDepsRouteImport } from './routes/notRemountDeps'
15+
import { Route as HoverPreloadHashRouteImport } from './routes/hover-preload-hash'
1516
import { Route as EditingBRouteImport } from './routes/editing-b'
1617
import { Route as EditingARouteImport } from './routes/editing-a'
1718
import { Route as ComponentTypesTestRouteImport } from './routes/component-types-test'
@@ -125,6 +126,11 @@ const NotRemountDepsRoute = NotRemountDepsRouteImport.update({
125126
path: '/notRemountDeps',
126127
getParentRoute: () => rootRouteImport,
127128
} as any)
129+
const HoverPreloadHashRoute = HoverPreloadHashRouteImport.update({
130+
id: '/hover-preload-hash',
131+
path: '/hover-preload-hash',
132+
getParentRoute: () => rootRouteImport,
133+
} as any)
128134
const EditingBRoute = EditingBRouteImport.update({
129135
id: '/editing-b',
130136
path: '/editing-b',
@@ -659,6 +665,7 @@ export interface FileRoutesByFullPath {
659665
'/component-types-test': typeof ComponentTypesTestRoute
660666
'/editing-a': typeof EditingARoute
661667
'/editing-b': typeof EditingBRoute
668+
'/hover-preload-hash': typeof HoverPreloadHashRoute
662669
'/notRemountDeps': typeof NotRemountDepsRoute
663670
'/posts': typeof PostsRouteWithChildren
664671
'/remountDeps': typeof RemountDepsRoute
@@ -757,6 +764,7 @@ export interface FileRoutesByTo {
757764
'/component-types-test': typeof ComponentTypesTestRoute
758765
'/editing-a': typeof EditingARoute
759766
'/editing-b': typeof EditingBRoute
767+
'/hover-preload-hash': typeof HoverPreloadHashRoute
760768
'/notRemountDeps': typeof NotRemountDepsRoute
761769
'/remountDeps': typeof RemountDepsRoute
762770
'/non-nested/deep': typeof NonNestedDeepRouteRouteWithChildren
@@ -849,6 +857,7 @@ export interface FileRoutesById {
849857
'/component-types-test': typeof ComponentTypesTestRoute
850858
'/editing-a': typeof EditingARoute
851859
'/editing-b': typeof EditingBRoute
860+
'/hover-preload-hash': typeof HoverPreloadHashRoute
852861
'/notRemountDeps': typeof NotRemountDepsRoute
853862
'/posts': typeof PostsRouteWithChildren
854863
'/remountDeps': typeof RemountDepsRoute
@@ -952,6 +961,7 @@ export interface FileRouteTypes {
952961
| '/component-types-test'
953962
| '/editing-a'
954963
| '/editing-b'
964+
| '/hover-preload-hash'
955965
| '/notRemountDeps'
956966
| '/posts'
957967
| '/remountDeps'
@@ -1050,6 +1060,7 @@ export interface FileRouteTypes {
10501060
| '/component-types-test'
10511061
| '/editing-a'
10521062
| '/editing-b'
1063+
| '/hover-preload-hash'
10531064
| '/notRemountDeps'
10541065
| '/remountDeps'
10551066
| '/non-nested/deep'
@@ -1141,6 +1152,7 @@ export interface FileRouteTypes {
11411152
| '/component-types-test'
11421153
| '/editing-a'
11431154
| '/editing-b'
1155+
| '/hover-preload-hash'
11441156
| '/notRemountDeps'
11451157
| '/posts'
11461158
| '/remountDeps'
@@ -1244,6 +1256,7 @@ export interface RootRouteChildren {
12441256
ComponentTypesTestRoute: typeof ComponentTypesTestRoute
12451257
EditingARoute: typeof EditingARoute
12461258
EditingBRoute: typeof EditingBRoute
1259+
HoverPreloadHashRoute: typeof HoverPreloadHashRoute
12471260
NotRemountDepsRoute: typeof NotRemountDepsRoute
12481261
PostsRoute: typeof PostsRouteWithChildren
12491262
RemountDepsRoute: typeof RemountDepsRoute
@@ -1300,6 +1313,13 @@ declare module '@tanstack/react-router' {
13001313
preLoaderRoute: typeof NotRemountDepsRouteImport
13011314
parentRoute: typeof rootRouteImport
13021315
}
1316+
'/hover-preload-hash': {
1317+
id: '/hover-preload-hash'
1318+
path: '/hover-preload-hash'
1319+
fullPath: '/hover-preload-hash'
1320+
preLoaderRoute: typeof HoverPreloadHashRouteImport
1321+
parentRoute: typeof rootRouteImport
1322+
}
13031323
'/editing-b': {
13041324
id: '/editing-b'
13051325
path: '/editing-b'
@@ -2402,6 +2422,7 @@ const rootRouteChildren: RootRouteChildren = {
24022422
ComponentTypesTestRoute: ComponentTypesTestRoute,
24032423
EditingARoute: EditingARoute,
24042424
EditingBRoute: EditingBRoute,
2425+
HoverPreloadHashRoute: HoverPreloadHashRoute,
24052426
NotRemountDepsRoute: NotRemountDepsRoute,
24062427
PostsRoute: PostsRouteWithChildren,
24072428
RemountDepsRoute: RemountDepsRoute,

‎e2e/react-router/basic-file-based/src/routes/hover-preload-hash.tsx‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
import { Link, createFileRoute } from '@tanstack/react-router'
2+
3+
export const Route = createFileRoute('/hover-preload-hash')({
4+
component: Page,
5+
})
6+
7+
function Page() {
8+
return (
9+
<>
10+
<div className="p-2">Hello from About!</div>
11+
<Link
12+
to="/hover-preload-hash"
13+
hash={'position1'}
14+
className="[&.active]:font-bold"
15+
data-testid="link-to-hash"
16+
>
17+
To hash
18+
</Link>
19+
20+
<p>
21+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
22+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
23+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
24+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
25+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
26+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
27+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
28+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
29+
ipsum dolor sit amet.
30+
</p>
31+
<p>
32+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
33+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
34+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
35+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
36+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
37+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
38+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
39+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
40+
ipsum dolor sit amet.
41+
</p>
42+
<p>
43+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
44+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
45+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
46+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
47+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
48+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
49+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
50+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
51+
ipsum dolor sit amet.
52+
</p>
53+
<p>
54+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
55+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
56+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
57+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
58+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
59+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
60+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
61+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
62+
ipsum dolor sit amet.
63+
</p>
64+
<p>
65+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
66+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
67+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
68+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
69+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
70+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
71+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
72+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
73+
ipsum dolor sit amet.
74+
</p>
75+
<p>
76+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
77+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
78+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
79+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
80+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
81+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
82+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
83+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
84+
ipsum dolor sit amet.
85+
</p>
86+
<p>
87+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
88+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
89+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
90+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
91+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
92+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
93+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
94+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
95+
ipsum dolor sit amet.
96+
</p>
97+
<p>
98+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
99+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
100+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
101+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
102+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
103+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
104+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
105+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
106+
ipsum dolor sit amet.
107+
</p>
108+
<p>
109+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
110+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
111+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
112+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
113+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
114+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
115+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
116+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
117+
ipsum dolor sit amet.
118+
</p>
119+
<p>
120+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
121+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
122+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
123+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
124+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
125+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
126+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
127+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
128+
ipsum dolor sit amet.
129+
</p>
130+
<p>
131+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
132+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
133+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
134+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
135+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
136+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
137+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
138+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
139+
ipsum dolor sit amet.
140+
</p>
141+
<p>
142+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
143+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
144+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
145+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
146+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
147+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
148+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
149+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
150+
ipsum dolor sit amet.
151+
</p>
152+
<p>
153+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
154+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
155+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
156+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
157+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
158+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
159+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
160+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
161+
ipsum dolor sit amet.
162+
</p>
163+
<p>
164+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
165+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
166+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
167+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
168+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
169+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
170+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
171+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
172+
ipsum dolor sit amet.
173+
</p>
174+
<p>
175+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
176+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
177+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
178+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
179+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
180+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
181+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
182+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
183+
ipsum dolor sit amet.
184+
</p>
185+
<p>
186+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
187+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
188+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
189+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
190+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
191+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
192+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
193+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
194+
ipsum dolor sit amet.
195+
</p>
196+
<p>
197+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
198+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
199+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
200+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
201+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
202+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
203+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
204+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
205+
ipsum dolor sit amet.
206+
</p>
207+
<p>
208+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
209+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
210+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
211+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
212+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
213+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
214+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
215+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
216+
ipsum dolor sit amet.
217+
</p>
218+
<h2 id="position1">Hash is here</h2>
219+
<p>
220+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
221+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
222+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
223+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
224+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
225+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
226+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
227+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
228+
ipsum dolor sit amet.
229+
</p>
230+
<p>
231+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
232+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
233+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
234+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
235+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
236+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
237+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
238+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
239+
ipsum dolor sit amet.
240+
</p>
241+
<p>
242+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
243+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
244+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
245+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
246+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
247+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
248+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
249+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
250+
ipsum dolor sit amet.
251+
</p>
252+
<p>
253+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
254+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
255+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
256+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
257+
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
258+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
259+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
260+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
261+
ipsum dolor sit amet.
262+
</p>
263+
</>
264+
)
265+
}

0 commit comments

Comments
 (0)