Navigating around website with firebase hosting

Question

this question might seem simple but I am trying to find a way to navigate around my website which I'm hosting on firebase host.

so I've created this website with this screen

now when the user clicks on the "living room" option in the toolbar I want to navigate them to the living room screen, I looked around I read on the firebase documentation here that I can redirect users to other pages of my website using rewrites

so I tried to change the URL when the user clicks on the living room option to

"myAppDomain/LivingRoom"

and then I fixed the firebase.js file and added this to it

"rewrites": [ {
  "source": "/LivingRoom",
  "destination": "/LivingRoom.html"
} ],

so for now when the user clicks on a button I just change his URL to "myWebSiteDomain.com/LivingRoom". sadly it doesn't seem to work for me.

I just want to direct users to other screens when they request it. How can achieve this?

Answer 1

Rewrites are for changing the URL of a certain page. Not moving the user to a different page. What your rewrite did, is it changed the URL from yoursite.com/LivingRoom.html to yoursite.com/LivingRoom If your navigation bar uses the button tag , add the onclick attribute and use window.location.href to redirect the user.

<button onclick="window.location.href = "LivingRoom.html">Living Room</button>

If your site uses link tags for the navigation, add the href attribute.

<a href="LivingRoom.html">Living Room</a>