open-saas icon indicating copy to clipboard operation
open-saas copied to clipboard

Make navigation in template use Link tags rather then A tags.

Open npenza opened this issue 6 months ago • 1 comments

Currently, the template uses a tags for its navigation items.

https://github.com/wasp-lang/open-saas/blob/2a4c5e7206d2124d41138da9ce3e600c19f1b057/template/app/src/client/components/AppNavBar.tsx#L47-L54

This causes the page to reload when navigating around items. Example:

https://github.com/user-attachments/assets/76ba1e85-893c-487f-8312-87113ba4af27

My fix is quite a minor one. Replace the a tag used in the navigation mapping with the link tag from react-router-dom. Doing so creates a better nav experience for users (both mobile and nav will need to be updated). Example:

Screenshot 2024-08-22 at 8 06 29 AM

https://github.com/user-attachments/assets/960cf97d-705b-4e26-8fa9-c57e3b9aec00

Currently, Link is being used in this file from the wasp router, which I believe can only point to files defined in the main.wasp file. Are we able to replace the wasp version of Link with the react-router-dom, which will allow links to be defined and used within the nav file?

I would love to work and contribute on this. Its a small improvement, but having to reload pages in a react-app takes away from that seamless SPA experience.

npenza avatar Aug 21 '24 22:08 npenza