Best way to detect pathless routes?
I have a sort of a 2d navigation in my app, and have an idea to use pathless layout routes to detect where we are in the "matrix". See attached image, from this file structure I want to detect:
- level (root, retailer, machine)
- category (commercial, logistics, operational)
What is the best way to do this? I have two ways that work now:
1. Use the useMatches() hook, check for string "/_commercial"
2. Use router context and store level and category here
Some example code:
export function useMatrixCategory(): Category | undefined {
const allMatchedRouteIds = useMatches().map((c) => c.routeId.toString());
allMatchedRouteIds.forEach((routeId) => {
if (routeId.indexOf('/_operational') !== -1) {
return 'operational';
} else if (routeId.indexOf('/_commercial') !== -1) {
return 'commercial';
} else if (routeId.indexOf('/_logistics') !== -1) {
return 'logistics';
}
return undefined;
});
// Alternative: put in context
/* const router = useRouter();
const context = router.options.context;
console.log('useMatrixCategory', context.category);
return context.category; */
}
Are there any other tools I can use? Better type support?
7 Replies
xenophobic-harlequinOP•6mo ago
When testing this it seems like useMatches() isn't memoized, or it's running too often. Probably when some router state is updated that I'm not interested in, I'm only interested in the routeIds. Are there other tools I can use for this?
correct-apricot•6mo ago
use the select function
xenophobic-harlequinOP•6mo ago
Thank you!
+ structuralSharing: true I guess
export function useMatrixCategory(): Category | undefined {
return useMatches({
select: (matches): Category | undefined => {
console.log('calculate matches matrix category');
for (const c of matches) {
const routeId = c.routeId;
if (routeId.indexOf('/_operational') !== -1) {
return 'operational';
} else if (routeId.indexOf('/_commercial') !== -1) {
return 'commercial';
} else if (routeId.indexOf('/_logistics') !== -1) {
return 'logistics';
}
}
return undefined;
},
structuralSharing: true
});
}
In this example, I can observe that "calculate matches matrix category" is logged around 20 times per render. Is there a way to avoid this?
correct-apricot•6mo ago
no. but it shouldn't be a problem as the actual costly operation (rendering) will not occur that often
xenophobic-harlequinOP•6mo ago
Well, it is iterating the array of matches a few times, 20 * 8. But you're right it doesn't cause a re-render with the select function
correct-apricot•6mo ago
if you can provide a complete minimal example that shows that this is 20 times executed we might be able to debug and optimize
xenophobic-harlequinOP•6mo ago
I have a test repo locally, I'll see if I can clean up a bit and push it to github
Still a bit messy, but if you have time to take a look that would be great 🙂
https://github.com/thomastvedt/Tank/blob/main/src/matrix/useMatrixCategory.ts
I'm just playing around with tanstack-router, testing various things. We're considering moving from react-router to tanstack-router.