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
Redirect in loader causes infinite loop
Hi,
Basically I want to throw a redirect in the loader function based on some server result. The thing is, the loader is implemented on a dynamic route segment.
Given the following path:
...
File based routing /post/new route matching
Hi, I'm making a simple CRUD app using file based routing and I have the following files
posts.tsx
posts.new.tsx
...
Style/Best Practices
I've got a question about styling/best practice for a layout like component.
The code below is how I have the __root.tsx setup at the moment, I'm using session storage to hold tokens then checking if a user has permission to get past the login view. And if they do the root renders the navbar that will be rendered in all routes, kind of like a layout, (at least how I understand them).
```const RootComponent = () => {...
Authenticated routes with tanstack Query requires window reload
I implemented a authenticated routes with Tanstack router. Information about user coming from Tanstack Query. Like this:
```tsx
const Component = () => {
const { user } = Route.useRouteContext();
...
Race condition with beforeLoad and routerContext
I have a function that does the following in a mutation:
```
const mutation = useMutation({...
tRPC in context or constant?
I'm looking at the tRPC + React Query example, and I'm confused on whether to pass the tRPC variable to the context.
I see that it is defined that way but when each component access the tRPC var it uses it from the global scope instead of the one in the context, is that by design? Or is it just because it's in the same file, and it should be accessed from the context?...
On refresh, always getting redirected to home page.
I sort of understand why this is happening but not sure how to fix it.
In the first screenshot is my sign-in component. It basically says if there is a user and we are trying to access
/sign-in, redirect to home page.
And the 2nd screenshot is my __root.tsx component where as soon as my auth is done, I call router.invalidate(). This makes sure that beforeLoadruns again....
Lazy loading progress
Is there a way to read out if something is currently lazy loading and the status on how far it is ?
Need to convert Rust code to run in GPU instead of CPU
Adapt a project in RUST to work with CUDA(convert project to run in GPU instead of CPU)
We are seeking a talented RUST developer to adapt our crypto project code from CPU to GPU using CUDA. The project currently involves decrypting and qualifying solutions using CPU, but we want to optimize performance by utilizing GPU. Your responsibilities will include modifying the existing codebase, implementing CUDA technology, and ensuring seamless integration with the project. We are looking for someone with a strong understanding of cryptography, CUDA programming, and parallel computing. The ideal candidate should have experience in optimizing algorithms for GPU and working with complex cryptographic systems. If you are passionate about both cryptography and GPU programming, we would love to hear from you!
https://github.com/reactmaster223/tig-monorepo-main...
Routing with async data
Consider the following setup where my context has
user: User | null:
```
// app.tsx
const {data: user} = useUser();...How to prevent router from breaking mantine styles
Anyone setup tanstack router for use with an app that uses mantine components / styles? I've noticed that no matter where I put the <MantineProvider> tag (above router in the tree, within router in the tree, in the root route) it no longer works... specifically breaking all of the styles. I'm not super experienced with mantine or tanstack router to know why this might be breaking.
It seems like the components themselves work, but the MantineProvider doesnt seem like its providing styles to any of those components, nor is it providing css variables to css included elsewhere.
I searched and saw some mentions of polymorphic components not working or something... I have no idea if that is related at all. Basically I just dont see styles beign applied...
Need help with Breadcrumb component using Shadcn UI and Tanstack Router
Hi everyone,
I'm trying to build a breadcrumb component using Shadcn UI and Tanstack Router, but I'm running into some issues. I found some code online that I've been trying to use, but it's not working as expected.
The code I've been using looks like this:...
Looking to animate my route changes (fade-to-black type thing)
How would I go about this with the router? Is it compatible with framer-motion or other established patterns of achieving this? If not, how might you implement animated route changes?
I tried looking for examples online and ultimately came up empty handed....
Why might search be persisted through navigation?
I am wondering: why might search items be carried through an imperative call to
navigate({ to: '/some-place' }) (from useNavigate())? I cannot for the life of me figure out why, since the default behavior seems to be to clear the search items when navigate() is called even without explicit search: {}. In my case, explicitly calling navigate({ to: '/some-place', search: {} }) does not work--the search string is carried through. I cannot unfortunately reproduce this in a sample project...Delay in loading component with tanstack lazy loading
Hi,
I’m implementing lazy loading with TanStack Router in my React application. I’m facing an issue with a small delay in rendering the component after the URL gets updated. Ideally, the URL should update immediately, and while the new component is loading, a pendingComponent should be displayed. However, in my case, the pendingComponent only shows up on the first page load. For subsequent navigations, the URL updates but there is a small delay in rendering the new component, and during this time, the old component remains visible.
Router Setup...
useParams typescript error
I have some shared components that i use across different routers. I wanna use useParams hook but sometimes params is not on URL and passed to component like a param. In this cases i got TS error:
example:
...
const someId =
useParams({ strict: false })?.someId || props.someId;
const someId =
useParams({ strict: false })?.someId || props.someId;
<Link> in RouterContextProvider doesn't navigate to link
Hi,
I'm currently building a project that uses a variety of packages. Each of these packages has it's own instance of
@tanstack/react-router. I'm trying to create a <Link> between two of these packages. Since package A does not know of the existance of package B, I'm wrapping the URL in a <RouterContextProvider> with the router being the router in the other package. All is well so far; I get the correct suggestions now and everything seems like it works.
Problem now is, when clicking the link in the browser, the URL in the browser actually gets changed to the correct one, but the browser never navigates away from the page. Is this something I am doing wrong? The <a> in the browser has all the correct attributes, so I'm kinda confused here....'rules-of-hooks' ESLint rule conflicts with inline route components
When Should we just never write components inline like this? Functionally it makes no difference. That would be just to appease this rule. Any recommendations?...
plugin-hooks/recommended is used, the following code causes an ESLint error:const Route = createRoute({
component: () => {
useState() // React Hook "useState" is called in function "component" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". eslintreact-hooks/rules-of-hooks
const Route = createRoute({
component: () => {
useState() // React Hook "useState" is called in function "component" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". eslintreact-hooks/rules-of-hooks