@@ -23,6 +23,7 @@ import type { StandardSchemaValidator } from '@tanstack/router-core'
2323import type {
2424 AnyRoute ,
2525 AnyRouter ,
26+ MakeRemountDepsOptionsUnion ,
2627 RouterOptions ,
2728 ValidatorFn ,
2829 ValidatorObj ,
@@ -61,6 +62,18 @@ function createTestRouter(options?: RouterOptions<AnyRoute, 'never'>) {
6162 } ,
6263 } )
6364 const indexRoute = createRoute ( { getParentRoute : ( ) => rootRoute , path : '/' } )
65+ const usersRoute = createRoute ( {
66+ getParentRoute : ( ) => rootRoute ,
67+ path : '/users' ,
68+ } )
69+ const userRoute = createRoute ( {
70+ getParentRoute : ( ) => usersRoute ,
71+ path : '/$userId' ,
72+ } )
73+ const userFilesRoute = createRoute ( {
74+ getParentRoute : ( ) => userRoute ,
75+ path : '/files/$fileId' ,
76+ } )
6477 const postsRoute = createRoute ( {
6578 getParentRoute : ( ) => rootRoute ,
6679 path : '/posts' ,
@@ -224,8 +237,21 @@ function createTestRouter(options?: RouterOptions<AnyRoute, 'never'>) {
224237 } ,
225238 } )
226239
240+ const nestedSearchRoute = createRoute ( {
241+ getParentRoute : ( ) => rootRoute ,
242+ validateSearch : z . object ( { foo : z . string ( ) } ) ,
243+ path : 'nested-search' ,
244+ } )
245+
246+ const nestedSearchChildRoute = createRoute ( {
247+ getParentRoute : ( ) => nestedSearchRoute ,
248+ validateSearch : z . object ( { bar : z . string ( ) } ) ,
249+ path : 'child' ,
250+ } )
251+
227252 const routeTree = rootRoute . addChildren ( [
228253 indexRoute ,
254+ usersRoute . addChildren ( [ userRoute . addChildren ( [ userFilesRoute ] ) ] ) ,
229255 postsRoute . addChildren ( [ postIdRoute ] ) ,
230256 pathSegmentEAccentRoute ,
231257 pathSegmentRocketEmojiRoute ,
@@ -252,6 +278,7 @@ function createTestRouter(options?: RouterOptions<AnyRoute, 'never'>) {
252278 searchWithDefaultIndexRoute ,
253279 searchWithDefaultCheckRoute ,
254280 ] ) ,
281+ nestedSearchRoute . addChildren ( [ nestedSearchChildRoute ] ) ,
255282 ] )
256283
257284 const router = createRouter ( { routeTree, ...options } )
@@ -681,21 +708,53 @@ describe('router emits events during rendering', () => {
681708} )
682709
683710describe ( 'router rendering stability' , ( ) => {
684- it ( 'should not remount the page component when navigating to the same route' , async ( ) => {
685- const callerMock = vi . fn ( )
711+ type RemountDepsFn = ( opts : MakeRemountDepsOptionsUnion ) => any
712+ async function setup ( opts ?: {
713+ remountDeps : {
714+ default ?: RemountDepsFn
715+ fooId ?: RemountDepsFn
716+ barId ?: RemountDepsFn
717+ }
718+ } ) {
719+ const mountMocks = {
720+ fooId : vi . fn ( ) ,
721+ barId : vi . fn ( ) ,
722+ }
686723
687724 const rootRoute = createRootRoute ( {
688725 component : ( ) => {
689726 return (
690727 < div >
691728 < p > Root</ p >
692729 < div >
693- < Link to = "/foo/$id" params = { { id : '1' } } >
730+ < Link
731+ data-testid = "link-foo-1"
732+ to = "/foo/$fooId"
733+ params = { { fooId : '1' } }
734+ >
694735 Foo1
695736 </ Link >
696- < Link to = "/foo/$id" params = { { id : '2' } } >
737+ < Link
738+ data-testid = "link-foo-2"
739+ to = "/foo/$fooId"
740+ params = { { fooId : '2' } }
741+ >
697742 Foo2
698743 </ Link >
744+ < Link
745+ data-testid = "link-foo-3-bar-1"
746+ to = "/foo/$fooId/bar/$barId"
747+ params = { { fooId : '3' , barId : '1' } }
748+ >
749+ Foo3-Bar1
750+ </ Link >
751+ < Link
752+ data-testid = "link-foo-3-bar-2"
753+ to = "/foo/$fooId/bar/$barId"
754+ params = { { fooId : '3' , barId : '2' } }
755+ >
756+ Foo3-Bar2
757+ </ Link >
699758 </ div >
700759 < Outlet />
701760 </ div >
@@ -711,43 +770,127 @@ describe('router rendering stability', () => {
711770 } )
712771 const fooIdRoute = createRoute ( {
713772 getParentRoute : ( ) => rootRoute ,
714- path : '/foo/$id ' ,
773+ path : '/foo/$fooId ' ,
715774 component : FooIdRouteComponent ,
775+ remountDeps : opts ?. remountDeps . fooId ,
716776 } )
777+
717778 function FooIdRouteComponent ( ) {
718- const id = fooIdRoute . useParams ( { select : ( s ) => s . id } )
779+ const fooId = fooIdRoute . useParams ( { select : ( s ) => s . fooId } )
780+ useEffect ( ( ) => {
781+ mountMocks . fooId ( )
782+ } , [ ] )
783+
784+ return (
785+ < div data-testid = "fooId-page" >
786+ Foo page < span data-testid = "fooId-value" > { fooId } </ span > < Outlet />
787+ </ div >
788+ )
789+ }
790+
791+ const barIdRoute = createRoute ( {
792+ getParentRoute : ( ) => fooIdRoute ,
793+ path : '/bar/$barId' ,
794+ component : BarIdRouteComponent ,
795+ remountDeps : opts ?. remountDeps . barId ,
796+ } )
797+
798+ function BarIdRouteComponent ( ) {
799+ const barId = fooIdRoute . useParams ( { select : ( s ) => s . barId } )
719800
720801 useEffect ( ( ) => {
721- callerMock ( )
802+ mountMocks . barId ( )
722803 } , [ ] )
723804
724- return < div > Foo page { id } </ div >
805+ return (
806+ < div data-testid = "barId-page" >
807+ Bar page < span data-testid = "barId-value" > { barId } </ span > < Outlet />
808+ </ div >
809+ )
725810 }
726811
727- const routeTree = rootRoute . addChildren ( [ fooIdRoute , indexRoute ] )
728- const router = createRouter ( { routeTree } )
812+ const routeTree = rootRoute . addChildren ( [
813+ fooIdRoute . addChildren ( [ barIdRoute ] ) ,
814+ indexRoute ,
815+ ] )
816+ const router = createRouter ( {
817+ routeTree,
818+ defaultRemountDeps : opts ?. remountDeps . default ,
819+ } )
820+
821+ await act ( ( ) => render ( < RouterProvider router = { router } /> ) )
729822
730- render ( < RouterProvider router = { router } /> )
823+ const foo1 = await screen . findByTestId ( 'link-foo-1' )
824+ const foo2 = await screen . findByTestId ( 'link-foo-2' )
825+
826+ const foo3bar1 = await screen . findByTestId ( 'link-foo-3-bar-1' )
827+ const foo3bar2 = await screen . findByTestId ( 'link-foo-3-bar-2' )
828+
829+ expect ( foo1 ) . toBeInTheDocument ( )
830+ expect ( foo2 ) . toBeInTheDocument ( )
831+ expect ( foo3bar1 ) . toBeInTheDocument ( )
832+ expect ( foo3bar2 ) . toBeInTheDocument ( )
833+
834+ return { router, mountMocks, links : { foo1, foo2, foo3bar1, foo3bar2 } }
835+ }
836+
837+ async function check (
838+ page : 'fooId' | 'barId' ,
839+ expected : { value : string ; mountCount : number } ,
840+ mountMocks : Record < 'fooId' | 'barId' , ( ) => void > ,
841+ ) {
842+ const p = await screen . findByTestId ( `${ page } )
843+ expect ( p ) . toBeInTheDocument ( )
844+ const value = await screen . findByTestId ( `${ page } )
845+ expect ( value ) . toBeInTheDocument ( )
846+ expect ( value ) . toHaveTextContent ( expected . value )
847+
848+ expect ( mountMocks [ page ] ) . toBeCalledTimes ( expected . mountCount )
849+ }
731850
732- const foo1Link = await screen . findByRole ( 'link' , { name : 'Foo1' } )
733- const foo2Link = await screen . findByRole ( 'link' , { name : 'Foo2' } )
851+ it ( 'should not remount the page component when navigating to the same route but different path param if no remount deps are configured' , async ( ) => {
852+ const { mountMocks , links } = await setup ( )
734853
735- expect ( foo1Link ) . toBeInTheDocument ( )
736- expect ( foo2Link ) . toBeInTheDocument ( )
854+ await act ( ( ) => fireEvent . click ( links . foo1 ) )
855+ await check ( 'fooId' , { value : '1' , mountCount : 1 } , mountMocks )
856+ expect ( mountMocks . barId ) . not . toHaveBeenCalled ( )
737857
738- fireEvent . click ( foo1Link )
858+ await act ( ( ) => fireEvent . click ( links . foo2 ) )
859+ await check ( 'fooId' , { value : '2' , mountCount : 1 } , mountMocks )
860+ expect ( mountMocks . barId ) . not . toHaveBeenCalled ( )
739861
740- const fooPage1 = await screen . findByText ( 'Foo page 1' )
741- expect ( fooPage1 ) . toBeInTheDocument ( )
862+ await act ( ( ) => fireEvent . click ( links . foo3bar1 ) )
863+ await check ( 'fooId' , { value : '3' , mountCount : 1 } , mountMocks )
864+ await check ( 'barId' , { value : '1' , mountCount : 1 } , mountMocks ) ,
865+ await act ( ( ) => fireEvent . click ( links . foo3bar2 ) )
866+ await check ( 'fooId' , { value : '3' , mountCount : 1 } , mountMocks )
867+ await check ( 'barId' , { value : '2' , mountCount : 1 } , mountMocks )
868+ } )
869+
870+ it ( 'should remount the fooId and barId page component when navigating to the same route but different path param if defaultRemountDeps with params is used' , async ( ) => {
871+ const defaultRemountDeps : RemountDepsFn = ( opts ) => {
872+ return opts . params
873+ }
874+ const { mountMocks, links } = await setup ( {
875+ remountDeps : { default : defaultRemountDeps } ,
876+ } )
877+
878+ await act ( ( ) => fireEvent . click ( links . foo1 ) )
879+ await check ( 'fooId' , { value : '1' , mountCount : 1 } , mountMocks )
880+ expect ( mountMocks . barId ) . not . toHaveBeenCalled ( )
742881
743- expect ( callerMock ) . toBeCalledTimes ( 1 )
882+ await act ( ( ) => fireEvent . click ( links . foo2 ) )
744883
745- fireEvent . click ( foo2Link )
884+ await check ( 'fooId' , { value : '2' , mountCount : 2 } , mountMocks )
885+ expect ( mountMocks . barId ) . not . toHaveBeenCalled ( )
746886
747- const fooPage2 = await screen . findByText ( 'Foo page 2' )
748- expect ( fooPage2 ) . toBeInTheDocument ( )
887+ await act ( ( ) => fireEvent . click ( links . foo3bar1 ) )
888+ await check ( 'fooId' , { value : '3' , mountCount : 3 } , mountMocks )
889+ await check ( 'barId' , { value : '1' , mountCount : 1 } , mountMocks )
749890
750- expect ( callerMock ) . toBeCalledTimes ( 1 )
891+ await act ( ( ) => fireEvent . click ( links . foo3bar2 ) )
892+ await check ( 'fooId' , { value : '3' , mountCount : 3 } , mountMocks )
893+ await check ( 'barId' , { value : '2' , mountCount : 2 } , mountMocks )
751894 } )
752895} )
753896
@@ -792,21 +935,87 @@ describe('router matches URLs to route definitions', () => {
792935 ] )
793936 } )
794937
795- it ( 'layout splat route matches without splat ' , async ( ) => {
938+ it ( 'nested path params ' , async ( ) => {
796939 const { router } = createTestRouter ( {
797- history : createMemoryHistory ( { initialEntries : [ '/layout-splat' ] } ) ,
940+ history : createMemoryHistory ( {
941+ initialEntries : [ '/users/5678/files/123' ] ,
942+ } ) ,
798943 } )
799944
800945 await act ( ( ) => router . load ( ) )
801946
802947 expect ( router . state . matches . map ( ( d ) => d . routeId ) ) . toEqual ( [
803948 '__root__' ,
804- '/layout-splat' ,
805- '/layout-splat/' ,
949+ '/users' ,
950+ '/users/$userId' ,
951+ '/users/$userId/files/$fileId' ,
806952 ] )
807953 } )
808954} )
809955
956+ describe ( 'matches' , ( ) => {
957+ describe ( 'params' , ( ) => {
958+ it ( '/users/$userId/files/$fileId' , async ( ) => {
959+ const { router } = createTestRouter ( {
960+ history : createMemoryHistory ( {
961+ initialEntries : [ '/users/5678/files/123' ] ,
962+ } ) ,
963+ } )
964+
965+ await act ( ( ) => router . load ( ) )
966+
967+ const expectedStrictParams : Record < string , unknown > = {
968+ __root__ : { } ,
969+ '/users' : { } ,
970+ '/users/$userId' : { userId : '5678' } ,
971+ '/users/$userId/files/$fileId' : { userId : '5678' , fileId : '123' } ,
972+ }
973+
974+ expect ( router . state . matches . length ) . toEqual (
975+ Object . entries ( expectedStrictParams ) . length ,
976+ )
977+ router . state . matches . forEach ( ( match ) => {
978+ expect ( match . params ) . toEqual (
979+ expectedStrictParams [ '/users/$userId/files/$fileId' ] ,
980+ )
981+ } )
982+ router . state . matches . forEach ( ( match ) => {
983+ expect ( match . _strictParams ) . toEqual ( expectedStrictParams [ match . routeId ] )
984+ } )
985+ } )
986+ } )
987+
988+ describe ( 'search' , ( ) => {
989+ it ( '/nested-search/child?foo=hello&bar=world' , async ( ) => {
990+ const { router } = createTestRouter ( {
991+ history : createMemoryHistory ( {
992+ initialEntries : [ '/nested-search/child?foo=hello&bar=world' ] ,
993+ } ) ,
994+ } )
995+
996+ await act ( ( ) => router . load ( ) )
997+
998+ const expectedStrictSearch : Record < string , unknown > = {
999+ __root__ : { } ,
1000+ '/nested-search' : { foo : 'hello' } ,
1001+ '/nested-search/child' : { foo : 'hello' , bar : 'world' } ,
1002+ }
1003+
1004+ expect ( router . state . matches . length ) . toEqual (
1005+ Object . entries ( expectedStrictSearch ) . length ,
1006+ )
1007+ router . state . matches . forEach ( ( match ) => {
1008+ expect ( match . search ) . toEqual (
1009+ expectedStrictSearch [ '/nested-search/child' ] ,
1010+ )
1011+ } )
1012+ router . state . matches . forEach ( ( match ) => {
1013+ expect ( match . _strictSearch ) . toEqual ( expectedStrictSearch [ match . routeId ] )
1014+ } )
1015+ } )
1016+ } )
1017+ } )
1018+
8101019describe ( 'invalidate' , ( ) => {
8111020 it ( 'after router.invalid(), routes should be `valid` again after loading' , async ( ) => {
8121021 const { router } = createTestRouter ( {
0 commit comments