T
TanStack•2y ago
foreign-sapphire

purpose of <MatchRoute component

<MatchRoute
                    to="/dashboard/invoices/$invoiceId"
                    params={{
                      invoiceId: invoice.id,
                    }}
                    pending
                  >
                    {(match) => <Spinner show={!!match} wait="delay-50" />}
                  </MatchRoute>
<MatchRoute
                    to="/dashboard/invoices/$invoiceId"
                    params={{
                      invoiceId: invoice.id,
                    }}
                    pending
                  >
                    {(match) => <Spinner show={!!match} wait="delay-50" />}
                  </MatchRoute>
https://tanstack.com/router/v1/docs/framework/react/examples/kitchen-sink-react-query-file-based in dahsboard.invoices.tsx what is the purpose of this component
React Router Kitchen Sink React Query File Based Example | TanStack...
An example showing how to implement Kitchen Sink React Query File Based in React Router
No description
2 Replies
foreign-sapphire
foreign-sapphireOP•2y ago
https://tanstack.com/router/latest/docs/framework/react/guide/navigation#:~:text=The%20hook%20version%20useMatchRoute%20returns%20a%20function%20that%20can%20be%20called%20programmatically%20to%20check%20if%20a%20route%20is%20matched%3A
Navigation | TanStack Router Docs
Everything is Relative Believe it or not, every navigation within an app is relative, even if you aren't using explicit relative path syntax (../../somewhere). Any time a link is clicked or an imperative navigation call is made, you will always have an origin path and a destination path which means you are navigating from one route to another ...
robust-apricot
robust-apricot•2y ago
The MatchRoute component can be though of as an IF STATEMENT of sorts, that lets you programmatically render something if all the checks pass. This is the intended behaviour of the component. In the screenshot above, the conditions would be, - Route is /dashboard/invoices/$invoiceId - Path matches invoiceId=invoice.id - Route is in the pending state (like when the loader is being called) Based on your loader setup and timing this could affect when the conditions for if the route has been matched to render its children. You can fully see it in action on the /dashboard/users page when navigating between users.

Did you find this page helpful?