How to modify location.hash, so that it doesn't trigger routing transitions?

1

Is there a way to modify location.hash, so that it doesn’t trigger route transitions? How to generate URL like /rooms/123#something using Route#transitionTo method?

I’ve got a chat-like app with a button that redirects user to a page with randomly generated room name. I’d like to display a modal with instructions that would include a URL of the page, so that it’s easy to share it with others. However, I’d like to display this modal only for the person who created the room, i.e. clicked the button. I thought about generating URL like /rooms/123#show-instructions and then check hash value in renderTemplate method, display the modal and remove the hash. This way the user would never see it, so if you decide to copy URL from the browser’s address bar instead from the instructions in the modal, it would still work correctly.

How to do it if I’m using AutoLocation? If it makes things any easier, I could switch to HistoryLocation, as the app only works with modern browsers, anyway.

I could use some kind of storage (cookie, localStorage etc.) and store information whether to show the modal there, but I thought that using location.hash would be much cleaner in this case.

2

You might want to try using replaceWith, it works the same as transitionTo without adding to the history. Not quite sure about using AutoLocation with a hash, and what you’d need to do to make that work.

I’d look at using child routes instead of the hash, it would be easier to manage using your dynamic segment for the room, and you can control the access and rendering better through a route. child routes using replaceWith

3

Thanks!

Assuming that I’ll be using HistoryLocation how can I redirect user to URL with a hash? It looks like replaceWith/transitionTo doesn’t allow to pass anything that would end up as hash. I could build URL manually and pass that, but I’d really like to avoid it. I don’t really want to use child routes, as I’d like user to end up at route like /rooms/123, so if he decides to copy URL from the browser’s address bar and share it with someone, the other person won’t see the modal with sharing instructions.

I probably could use localStorage to store this info - user clicks “create room” button, I store info in local storage that I should show instructions for room 123, redirect user to /room/123, inside renderTemplate check local storage, eventually show modal and clear local storage.

I just thought that using hash would be much easier and won’t eventually leave anything in local storage.

1 Like