search

nareshbhatia / mobx-state-router

MobX-powered router for React apps
https://nareshbhatia.github.io/mobx-state-router/
MIT License
227 stars 31 forks source link

Set URI fragment/hash #117

Open hkeide opened 3 years ago

hkeide commented 3 years ago

Hello, thanks for a great library, finally something sane and simple.

Can I set the hash part of a URL in a link? I've looked everywhere and I can't find it mentioned anywhere.

Also, is there a good way to navigate to a completely custom full URL without having the library build the href? For example I get a sent a full URL by the server and I want to navigate to it without knowing which route it goes to. Should I just use the browser history API directly for this use case?

nareshbhatia commented 3 years ago

Hi @hkeide, this router was designed with the assumption of push state. May I know why you need to go for hash part?

For your second question, the router only knows about the specified routes sent to it in the constructor. I think it should be ok to use the history API outside of the router. Let me know how this works out for you.

hkeide commented 3 years ago

Hi, I have a long feed page, and I want to be able to scroll to a specific location on the page using a link without having to reload the SPA

nareshbhatia commented 3 years ago

If I am not mistaken, you should be able to render links on that page with associated hashes and they should jump to the right location. For example: <a href="/departments/electronics#cannon">Go to Cannon</a>. If it causes a page refresh, you can encapsulate this in a component and prevent the refresh, something like this.

hkeide commented 3 years ago

Doesn't a raw a tag like that always cause a page reload? It seems I have to override routerStateToUrl() so that routerStore.goToState() will do the right thing in the onClick handler? I can't see a way to do this without forking the library. Please correct me if I'm wrong. I can create a PR for adding fragment capability if you're interested.

laustdeleuran commented 9 months ago

Doesn't a raw a tag like that always cause a page reload?

@hkeide, I believe that is correct.

If it causes a page refresh, you can encapsulate this in a component and prevent the refresh, something like this.

@nareshbhatia, it's somewhat discouraging that I need to basically rewrite that entire component in order to create hash-links. Is there no better solution?

nareshbhatia commented 9 months ago

Hi @laustdeleuran, please feel free to submit a PR for this.

laustdeleuran commented 9 months ago

@nareshbhatia I actually looked into forking the RouterLink component to support hashes, but I don't see how I could even do that. The RouterLink component uses RouterState.goToState under the hood, which also doesn't support hashes, so forking the code in that component seems like it wouldn't work at all.

Effectively, it seems like I'd have to extend RouterState.goToState, but that is just a shallow wrapper on top of the TransitionState class. And I don't see any event hooks or public API that would allow me to extend that.

So, in other words, I'd have to submit a PR modifying the core functionality of this library, which I'm honestly down for, but I would love some more input on where this functionality should live. It feels clear to me that it should not live in the RouterLink component, but it feels pretty opaque where would be a more appropriate place for it.