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

[npenza]

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

open-saas/template/app/src/client/components/AppNavBar.tsx

Lines 47 to 54 in 2a4c5e7

	{navigation.map((item) => (
	<a
	key={item.name}
	href={item.href}
	className='text-sm font-semibold leading-6 text-gray-900 duration-300 ease-in-out hover:text-yellow-500 dark:text-white'
	>
	{item.name}
	</a>

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

example-a-tag.mov

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:

link-tag-example.mov

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.

[vincanger]

hey @npenza, go for it!

And, yes, if you're not using a route defined in the wasp config file, then you can use react-router-dom's Link component instead.