TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

react-query-questions

solid-query-questions

table-questions

virtual-questions

router-questions

react-charts-questions

ranger-questions

vue-query-questions

svelte-query-questions

bling-questions

form-questions

angular-query-questions

start-questions

db-questions

start-showcase

router-showcase

📣-announcements

metropolitan-bronze

2/4/2023

Prevent navigation (usePrompt & useBlocker)

Is there a way to programmatically prevent the navigation from happening? I would like to give the user a confirmation message when they try to navigate to another page while there is still an unfinished form to be submitted. It seems that there has been a way to do this with browser-native prompt dialog via usePrompt, but it has been commented out: https://github.com/TanStack/router/blob/ce80f78665c47ccde4823352f7b71c9b63da112a/packages/react-router/src/index.tsx#L728...

extended-salmon

2/3/2023

Can we use Route.onLoad and pass data to the Component without Loaders or Queries?

From what I can tell, you used to be able to return a value from onLoad and then retrieve the data using a hook. The old examples don't appear to work anymore. Having to introduce and manage separate Loaders and LoaderClient instances feels a bit clunky to use for basic page-load scenarios....

flat-fuchsia

1/31/2023

How to look for route changes in beta-68

I have this code here: ```ts const rootRoute = new RootRoute({ component: () => <App />, })...

notable-maroon

1/27/2023

Simple Example Using Navigate And Search Params

Given a validateSearch object like this: ```typescript validateSearch: () => z.object({ stopRedirect: z.boolean().optional() }),...

notable-maroon

1/26/2023

[Solved] Facing `Result_Code_Hung` When redirecting on load of a component

I have two navigate() calls that occur in quick succession that I believe cause an issue that causes the page to become unresponsive. I only have a few routes: ```typescript const routeTree = rootRoute.addChildren([...

conscious-sapphire

1/23/2023

Params type error

I'm trying to get an individual post on url:

"/blog/$postslug"

"/blog/$postslug"

if I'm using code below it navigates to correct route but no data is loaded on page and show's in dev tools but if I add

"blog/$postSlug"

"blog/$postSlug"

route doesn't appear in dev tools and Link throws type error for params. ```tsx export const postRoute = blogRoute.createRoute({ path: "$postSlug",...

rare-sapphire

1/23/2023

Is it safe to use on production?

Hey guys, maybe this is a stupid question but the only reference to that this package might be "unsafe" to use is with "BETA" in logo and npm package link. No info on github, website, anywhere, or at least I can't find it. So, is it relatively safe to use on production or some braking changes without new major version may happen? EDIT: Even here with searching through questions I can't find anyone asking about it :x Is the "beta" so obvious for everyone but me? 😅...

genetic-orange

1/19/2023

page not found when going directly to a route when deployed on netlify

Hello everyone! I'm having some issues, when I navigate through the app normally I can reach any route. Like clicking a <Link> that redirects to /app However when i try to go directly to let's say https://example.com/app I get Page Not Found. ...

other-emerald

1/16/2023

Router does not render children route component.

I'm trying to nest albums from user following the current url: "/user/$userId/album/$albumId" It does navigate, but it does not show the correct component(see the picture), it is stuck in the user pages, and does not show the album page. Why does this happen?...

metropolitan-bronze

1/14/2023

Will there be support for dynamically changing head on a server-side? Like react-helmet-async

As you may know, when working with only client-side change/add attributes in <head>, there are problems with displaying the page in search engines and with sharing publications in social networks. This is due to the fact that social networks and some search engines do not load the whole site with JS, but only the index.html. The tanstack router website has an example of SSR, but there is no example of changing <head> when navigating between pages on a server-side. Question: will there be support for third party libraries (preferably with an example) or a built-in solution for such?...

conventional-tan

1/12/2023

Close a modal using the back key, with tanstack-router

I have an app where modals are NOT controlled by url query params. I would like however to be able to close them using the back browser button (for mobile users basically) In the render function of my modal component, I was considered adding: ```...

harsh-harlequin

1/4/2023

Router doesn't seem to prioritize more specific paths

When I have "/accounts" and "/accounts/new" the router renders the /accounts component for both paths. Do I need to set things up a certain way to prioritize the more specific path?

provincial-silver

1/3/2023

Layout and loader in same path

If a layoutComponent and loader is defined in the same route then the layout is currently not rendered until the loader is completed. Is it possible to configure the the loader to execute "inside" the layoutComponent and use the route's pendingComponent? The fix/workaround for this currently seems to be to add a child route to the layout route that does the loading. Unfortunately this creates a lot of extra configuration. We have two nested layouts, a "root" and then a section specific layout. To load data for each level we need to add a "loader" route under each layout. This leaves us with a structure like root > layout > root-loader > projects > layout > projects-loader > projects-index. If the loaders were run inside suspense context created for the current route it would negate the need for the extra routes which would simplify our structure to root > layout > projects > projects-index....

fascinating-indigo

1/3/2023

how to add navbar and a sidebar inside the tanstack router?

I want to render each route inside sidebar

metropolitan-bronze

1/2/2023

Is React-Location library depricated?

I am currently using @tanstack/react-location library and the related documentation on website: https://react-location.tanstack.com. Recently, I found that in TanStack Router (beta) page there’s an installation with slightly different library name - @tanstack/react-router@beta. In this case I have few questions:...

continuing-cyan

1/2/2023

Getting an error with RouterProvider

I'm getting this error under <RouterProvider> and I'm not sure what's causing it. This is the error message provided: ```js Type '{ children: Element[]; router: Router<RouteConfig<"root", string, string, "", {}, AnyLoaderData, {}, {}, unknown, unknown, {}, AnySearchSchema, {}, {}, Record<never, string>, {}, (RouteConfig<...> | RouteConfig<...>)[]>, AllRouteInfo<...>, unknown>; }' is not assignable to type 'IntrinsicAttributes & RouterOptions<RouteConfig<"root", string, string, "", {}, AnyLoaderData, {}, {}, unknown, unknown, {}, AnySearchSchema, ... 4 more ..., (RouteConfig<...> | RouteConfig<...>)[]>, unknown> & { ...; }'....

harsh-harlequin

12/27/2022

``` declare module "@tanstack/react-router" { interface RegisterRouter { router: typeof router; }...

helpful-purple

12/24/2022

Nav bar options

I am trying to create a nav bar with some preset options and I want to get autocomplete on the paths I tried importing AllRouteInfo and ToPathOption to use them but I dont get my own route config (only "/" route is available) look 4th and 5th photo I also tried using path a string but the link than saying it missing params 3th photo...

helpful-purple

12/23/2022

Hey can someone help e with how to use this router

I am trying to use this router but I run into some problems. Link dont have safe type and router provider returning some weird error in the first photo I define my router and in the sec photo I try to use it for some reason my router.Link have a type safe and Link not...

unwilling-turquoise

12/23/2022

isActive render prop

When using isActive render prop to display navlink active styles, I get following typescript errors. How can I resolve them?

Previous Next

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs