About to give up, trying to use simple Link component with but it won't work.
Property 'search' is missing in type '{ children: string; to: string; }' but required in type '{ search: (current: {}) => never; }'.
@Tanner Linsley
I am not trying todo anything special here I am just linking to a new route, there's no dynamic params. The item.href is just a string "/" or "/home"
27 Replies
afraid-scarletOP•3y ago
Loosing my mind at how this is not working lol
fair-rose•3y ago
Do as cost instead of as navigation
afraid-scarletOP•3y ago
how do you mean?
Sorry totally lost here
Originally I didn't even type the navigation but still had errors...
@Tanner Linsley cost?
fair-rose•3y ago
Sorry lol just woke up. As const
afraid-scarletOP•3y ago
wait one sec
I already had that
still same issue
will screenshot again, give me a second
afraid-scarletOP•3y ago
Same issue
afraid-scarletOP•3y ago
Still asking for search prop, no idea why!
fair-rose•3y ago
Do any of your routes have search validators?
afraid-scarletOP•3y ago
nope
afraid-scarletOP•3y ago
afraid-scarletOP•3y ago
Eish, I'm running out of time!
Have a technical test to deliver tomorrow, can't work this out 😥
Will need to switch to react router and come back to this at a later date
Is there an example of a Layout route that takes in children?
afraid-scarletOP•3y ago
Also this situation lol
fair-rose•3y ago
Yep there’s an example
Does your link component have autocomplete for routes on its own?
Also, createRouteConfig takes options.
It’s already a “layout” route
😉
afraid-scarletOP•3y ago
I don't understand
Everytime I add my layout component it throws errors saying I am missing children
fair-rose•3y ago
That’s strange.
Route Components shouldn’t require any props
Ah, children is not the correct way to compose the routes unfortunately.
Let me get you an example of how to do it.
afraid-scarletOP•3y ago
thanks!
How does the component know how to wrap sub components if there are no children
fair-rose•3y ago
I’ll show you
Here’s how to do a layout route with the root route and createRouteConfig
fair-rose•3y ago
GitHub
router/main.tsx at beta · TanStack/router
🤖 Type-safe router w/ built-in caching & URL state management for JS/TS, React, Preact, Solid, Vue, Svelte and Angular - router/main.tsx at beta · TanStack/router
afraid-scarletOP•3y ago
<Outlet/>
Okay amazing thanks so much for the help on the Layout, boom its working!
Exciting times ahead
So I guess it was just the Link issue remaining, I'll check again maybe its resolved now
fair-rose•3y ago
Make sure you register your router
With the Register Router interface
afraid-scarletOP•3y ago
Still throwing errors
Could you share any more examples?
fair-rose•3y ago
GitHub
router/main.tsx at beta · TanStack/router
🤖 Type-safe router w/ built-in caching & URL state management for JS/TS, React, Preact, Solid, Vue, Svelte and Angular - router/main.tsx at beta · TanStack/router
mere-teal•3y ago
We are seeing the same issue that I believe Sean is referring to. We want to create an extracted Link component that has our classes and styles implemented, but that seems to break the type inference. It doesn't complain about bad links and instead throws an error about "search" missing.
Here is a stackblitz example: https://stackblitz.com/edit/tanstack-router-29hh8t?file=src%2Fmain.tsx%3AL38
Is there a way to extract this but keep the type safety? Ideally every link wouldn't need to copy the styles.
Johnathan Ludwig
StackBlitz
Tanstack Router Link Component - StackBlitz
Run official live example code for Router Basic, created by Tanstack on StackBlitz
fair-rose•3y ago
I'll throw together an example for you guys until the docs are done
fair-rose•3y ago
Tanner Linsley
StackBlitz
Tanstack Router Link Component (forked) - StackBlitz
Run official live example code for Router Basic, created by Tanstack on StackBlitz
fair-rose•3y ago
This uses the
MakeLinkOptions exported type
You have to pass it your AllRouteInfo, TFrom, and TTo
In this case, it's a global <Link> component, so TFrom is '/', TTo is generic and TAllRouteInfo is the RegisteredAllRouteInfo (which is the route info registered via the RegisterRouter interface... or just a generic DefaultAllRouteInfo instance if nothing has been registered)mere-teal•3y ago
awesome, thank you!