Do not generate invalid link hrefs if validateSearch is present on the route.

[avendiart]

As far as I can tell, even though a route definition might have a validateSearch option assigned to it, the Link component will still generate hrefs which will fail validation. I'm not exactly sure if this is a design decision or an oversight, but my expectation would be that the component will generate a valid href instead of a potentially invalid one.

The behavior in question is being tested here:

router/packages/react-router/tests/link.test.tsx

Line 422 in 6979e62

expect(postsLink).toHaveAttribute('href', '/posts?page=invalid')

However, I believe it should rather just be

expect(postsLink).toHaveAttribute('href', '/posts') 

[SeanCassiere]

The hrefs cannot use the output of validateSearch for the generated anchor tags, since the loadMatches call is asynchronous. Not to mention the runtime overhead that it'd probably add.

This isn't really a problem, especially if you've set up the correct fallback (.default/.catch) behaviour, where even clicking an invalid link should break everything for you.

[avendiart]

Hey, @SeanCassiere, thanks for getting back on this. As far as I can tell, Link calls the corresponding validateSearch during render already. I'm not familar with router's codebase yet, but since rendering a Link is a synchronous process and validateSearch is synchronous, I don't see how that would be an issue. The runtime overhead is already there, just the result of validation is not being used appropriately?

The following trace shows validateSearch being called indeed:

    at routeBValidateSearch (/tanstack-router-link-test/src/link.test.tsx:65:21)
    at file:///tanstack-router-link-test/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/src/router.ts:950:26
    at file:///tanstack-router-link-test/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/src/router.ts:969:9
    at Array.forEach (<anonymous>)
    at Router.matchRoutes (file:///tanstack-router-link-test/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/src/router.ts:930:19)
    at buildWithMatches (file:///tanstack-router-link-test/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/src/router.ts:1272:32)
    at Router.buildLocation (file:///tanstack-router-link-test/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/src/router.ts:1296:12)
    at useLinkProps (file:///tanstack-router-link-test/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/src/link.tsx:612:23)
    at file:///tanstack-router-link-test/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/src/link.tsx:898:34
    at renderWithHooks (/tanstack-router-link-test/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:15486:18)

I'm not exactly sure what you are referring to when you speak about loadMatches being asynchronous and how it's related to validateSearch specifically, so pardon my ignorance on that topic please.