useLocation
Hi team, I'm trying to adapt my opensaas app to use SAHDCN-admin (which is not a wasp first code base) so there are places that we need to ensure the routes etc adhere to wasp standards and best practices.
When I ask Claude for some best approaches it says the following:
// Before (from shadcn-admin)
import { useLocation } from 'react-router-dom';
// After (for Wasp)
import { useLocation } from 'wasp/client/router';
But with curosor, it keeps pushing back on this code, when I run audits on my code for best practice.
What is everyone's advise here?
5 Replies
Hi @stobbsc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the available knowledge sources, Wasp provides its own router utilities for type-safe links and route management, such as the Link component and the routes object, which are imported from wasp/client/router. However, there is no explicit mention in the documentation or community discussions about a wasp-provided useLocation hook or a direct replacement for React Router's useLocation.
The official docs and Discord threads show imports like:
But there is no example or mention of:
If you need to use useLocation, and your app is based on React Router (as Wasp is under the hood), you can continue to import it from react-router-dom:
This is consistent with how Wasp allows you to use React and React Router features directly for advanced routing needs, especially since Wasp currently only handles top-level routing and encourages using React Router for nested or custom routing scenarios Nested routing?.
Summary:
There is no Wasp-specific useLocation hook documented. The best practice is to continue using useLocation from react-router-dom when needed, and use Wasp's router utilities (like Link and routes) where applicable for type safety and integration with Wasp's routing system. If you need further integration or encounter issues, feel free to share more details or examples, and the community can help troubleshoot specific cases. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @stobbsc, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
There is no Wasp-specific useLocation hook documented. The best practice is to continue using useLocation from react-router-dom when needed, and use Wasp's router utilities (like Link and routes) where applicable for type safety and integration with Wasp's routing system. If you need further integration or encounter issues, feel free to share more details or examples, and the community can help troubleshoot specific cases. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @stobbsc, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
Hey @stobbsc we are about to merge a Shadcn-Admin template with Wasp. Here's the repo: https://github.com/wasp-lang/shadcn-admin/tree/vibe-starter
It's still not reviewed yet, but you can clone this branch to get it.
I remember I had to change a lot of routing stuff and prevent loading of an icon set and some other things to get it working nicely.
So save youself some time and grab it from here 🙂
GitHub
GitHub - wasp-lang/shadcn-admin at vibe-starter
Contribute to wasp-lang/shadcn-admin development by creating an account on GitHub.
Wish I had seen this message earlier, thanks I'll take a look. Yes lots of routing changes lol
please tell us later if this is useful so we can mark the question as solved 😄
yes this was useful and we can close this out now