@@ -61,6 +61,9 @@ export interface ReactRouterOptions {
61
61
62
62
type V6CompatibleVersion = '6' | '7' ;
63
63
64
+ // Keeping as a global variable for cross-usage in multiple functions
65
+ const allRoutes = new Set < RouteObject > ( ) ;
66
+
64
67
/**
65
68
* Creates a wrapCreateBrowserRouter function that can be used with all React Router v6 compatible versions.
66
69
*/
@@ -81,6 +84,10 @@ export function createV6CompatibleWrapCreateBrowserRouter<
81
84
}
82
85
83
86
return function ( routes : RouteObject [ ] , opts ?: Record < string , unknown > & { basename ?: string } ) : TRouter {
87
+ routes . forEach ( route => {
88
+ allRoutes . add ( route ) ;
89
+ } ) ;
90
+
84
91
const router = createRouterFunction ( routes , opts ) ;
85
92
const basename = opts ?. basename ;
86
93
@@ -90,19 +97,40 @@ export function createV6CompatibleWrapCreateBrowserRouter<
90
97
// This is the earliest convenient time to update the transaction name.
91
98
// Callbacks to `router.subscribe` are not called for the initial load.
92
99
if ( router . state . historyAction === 'POP' && activeRootSpan ) {
93
- updatePageloadTransaction ( activeRootSpan , router . state . location , routes , undefined , basename ) ;
100
+ updatePageloadTransaction (
101
+ activeRootSpan ,
102
+ router . state . location ,
103
+ routes ,
104
+ undefined ,
105
+ basename ,
106
+ Array . from ( allRoutes ) ,
107
+ ) ;
94
108
}
95
109
96
110
router . subscribe ( ( state : RouterState ) => {
97
- const location = state . location ;
98
111
if ( state . historyAction === 'PUSH' || state . historyAction === 'POP' ) {
99
- handleNavigation ( {
100
- location,
101
- routes,
102
- navigationType : state . historyAction ,
103
- version,
104
- basename,
105
- } ) ;
112
+ // Wait for the next render if loading an unsettled route
113
+ if ( state . navigation . state !== 'idle' ) {
114
+ requestAnimationFrame ( ( ) => {
115
+ handleNavigation ( {
116
+ location : state . location ,
117
+ routes,
118
+ navigationType : state . historyAction ,
119
+ version,
120
+ basename,
121
+ allRoutes : Array . from ( allRoutes ) ,
122
+ } ) ;
123
+ } ) ;
124
+ } else {
125
+ handleNavigation ( {
126
+ location : state . location ,
127
+ routes,
128
+ navigationType : state . historyAction ,
129
+ version,
130
+ basename,
131
+ allRoutes : Array . from ( allRoutes ) ,
132
+ } ) ;
133
+ }
106
134
}
107
135
} ) ;
108
136
@@ -137,6 +165,10 @@ export function createV6CompatibleWrapCreateMemoryRouter<
137
165
initialIndex ?: number ;
138
166
} ,
139
167
) : TRouter {
168
+ routes . forEach ( route => {
169
+ allRoutes . add ( route ) ;
170
+ } ) ;
171
+
140
172
const router = createRouterFunction ( routes , opts ) ;
141
173
const basename = opts ?. basename ;
142
174
@@ -162,7 +194,7 @@ export function createV6CompatibleWrapCreateMemoryRouter<
162
194
: router . state . location ;
163
195
164
196
if ( router . state . historyAction === 'POP' && activeRootSpan ) {
165
- updatePageloadTransaction ( activeRootSpan , location , routes , undefined , basename ) ;
197
+ updatePageloadTransaction ( activeRootSpan , location , routes , undefined , basename , Array . from ( allRoutes ) ) ;
166
198
}
167
199
168
200
router . subscribe ( ( state : RouterState ) => {
@@ -174,6 +206,7 @@ export function createV6CompatibleWrapCreateMemoryRouter<
174
206
navigationType : state . historyAction ,
175
207
version,
176
208
basename,
209
+ allRoutes : Array . from ( allRoutes ) ,
177
210
} ) ;
178
211
}
179
212
} ) ;
@@ -248,8 +281,6 @@ export function createV6CompatibleWrapUseRoutes(origUseRoutes: UseRoutes, versio
248
281
return origUseRoutes ;
249
282
}
250
283
251
- const allRoutes : Set < RouteObject > = new Set ( ) ;
252
-
253
284
const SentryRoutes : React . FC < {
254
285
children ?: React . ReactNode ;
255
286
routes : RouteObject [ ] ;
@@ -319,7 +350,6 @@ export function handleNavigation(opts: {
319
350
allRoutes ?: RouteObject [ ] ;
320
351
} ) : void {
321
352
const { location, routes, navigationType, version, matches, basename, allRoutes } = opts ;
322
-
323
353
const branches = Array . isArray ( matches ) ? matches : _matchRoutes ( routes , location , basename ) ;
324
354
325
355
const client = getClient ( ) ;
@@ -553,7 +583,7 @@ function updatePageloadTransaction(
553
583
) : void {
554
584
const branches = Array . isArray ( matches )
555
585
? matches
556
- : ( _matchRoutes ( routes , location , basename ) as unknown as RouteMatch [ ] ) ;
586
+ : ( _matchRoutes ( allRoutes || routes , location , basename ) as unknown as RouteMatch [ ] ) ;
557
587
558
588
if ( branches ) {
559
589
let name ,
@@ -569,7 +599,7 @@ function updatePageloadTransaction(
569
599
[ name , source ] = getNormalizedName ( routes , location , branches , basename ) ;
570
600
}
571
601
572
- getCurrentScope ( ) . setTransactionName ( name ) ;
602
+ getCurrentScope ( ) . setTransactionName ( name || '/' ) ;
573
603
574
604
if ( activeRootSpan ) {
575
605
activeRootSpan . updateName ( name ) ;
@@ -592,8 +622,6 @@ export function createV6CompatibleWithSentryReactRouterRouting<P extends Record<
592
622
return Routes ;
593
623
}
594
624
595
- const allRoutes : Set < RouteObject > = new Set ( ) ;
596
-
597
625
const SentryRoutes : React . FC < P > = ( props : P ) => {
598
626
const isMountRenderPass = React . useRef ( true ) ;
599
627
0 commit comments