Support Hash History? - Githubissues

oferitz commented 6 years ago

In React router you can do something like this:

import createHashHistory from 'history/createHashHistory'
<Router history={history}>
 <Routes />
</Router>

Is this supported?

This is very useful in environment like Electron where you can't use the "normal" HTML5 history API.

I didn't found anything in the docs except from this: https://reach.tech/router/api/createHistory but it doesn't seems related to what i'm looking for.

ryanflorence commented 6 years ago

No it's not.

In electron you can use a memory history instead of hash, yeah?

import {
  createMemorySource,
  createHistory,
  LocationProvider
} from "@reach/router"

let source = createMemorySource("/starting/url")
let history = createHistory(source)

let App = () => (
  <LocationProvider history={history}>
    <Router>
      {/* ... */}
    </Router>
  </LocationProvider>
)

oferitz commented 6 years ago

Thanks.

The memory history will probably work, but would you consider a PR that add support for hash history also?

ryanflorence commented 6 years ago

No. Hash history has a lot of edge cases that I don't want to deal with, but if you look at the source of createMemorySource you can see what you need to make a createHashSource.

will-stone commented 6 years ago

@oferitz I'd quite like this too. If you work on a Reach add-on to support hash history, do you mind posting it here so others may use it too?

And thanks Ryan for providing this router. It's definitely the easiest to use to-date.

oferitz commented 6 years ago

@will-stone If i understood @ryanflorence correctly, he will not consider any PR for adding hash support. so i didn't started any work on such thing. i actually found that memory history could work on my use case (Electron).

will-stone commented 6 years ago

Okay, thanks @oferitz, I'll look into it myself if I get time.

will-stone commented 6 years ago

@oferitz I've had a go at creating my own hash source: https://github.com/will-stone/hash-source

@ryanflorence I know you said you wouldn't be officially supporting this but I'd really appreciate it if you could do a quick once-over of the code (there's not a lot there) and let me know if there's any glaring omissions, or is just not the way it should be handled. Thanks.

nickserv commented 6 years ago

Wow, you can use the same LocationProvider with a different history source? This looks very promising, thanks @will-stone. Please ping me when it's published or if you need any help.

will-stone commented 6 years ago

@nickcolley it has been published: https://www.npmjs.com/package/hash-source

I've put together a sandbox to demo it: https://codesandbox.io/s/30yj1213m However, the back/forwards functionality doesn't work on the sandbox (it did on my local tests). Which means we may need to use onHashChange. Anyway, if anybody would like to help out, please log issues/PRs on its repo and save Ryan from the noise on here.

edit: loading in separate window demonstrates it properly: https://30yj1213m.codesandbox.io/#/

jimthedev commented 6 years ago

Yeah @will-stone I was doing some things with hash previously and recall codesandbox not liking it.

j3l11234 commented 5 years ago

I also write a lib for use reach/router with hash. and also publish it look the similar to @will-stone . I think the reach/router just use a little part of location api and history api, so create a hash histroy is easy. I will update it continuously feel free to add issue

https://github.com/j3l11234/reach-router-hash-history https://www.npmjs.com/package/reach-router-hash-history

will-stone commented 5 years ago

@j3l11234 Hmmm... I'm not sure how I feel about that. Does yours offer anything over mine? It looks very similar. Some comments and functions are identical! If anything is missing, I'm happy to accept PRs and issues. It's not even forked or credited in the README. I'd say you've scored badly on open source etiquette.

raveenakothapally commented 5 years ago

@ryanflorence - I don't think createMemorySource persists state across refreshes which can be annoying during development. Would appreciate if memory is preserved across page refreshes.

FYI. This will not be a problem for hash routers or browser routers as the href on refresh won't change.

One workaround I could think of -

const REACH_ROUTER_LOCATION = "<SOME_STORAGE_KEY>";
const path = localStorage.getItem(REACH_ROUTER_LOCATION);

let source = createMemorySource(path || "/");
let history = createHistory(source);

const RootReachNode = () => (
  // You could also use a useEffect/unmount hook to capture pathname if this is not root node
  <LocationProvider history={history}>
      {...}
  </LocationProvider>
);

window.addEventListener("beforeunload", () => {
  localStorage.setItem(REACH_ROUTER_LOCATION, history.location.pathname);
});

j3l11234 commented 5 years ago

@will-stone Im sorry about that，In fact, that was not my intention. you can find the previous commit. I use another way to fix it. I want to make hash history similar to history, such as the overide addEventListener, I rewrite popstate to hashchange. I will simulate the state like history later. I will add the credit for you and I sincerely apologize for that again.

andreiglingeanu commented 5 years ago

@will-stone thanks! Works fine for my use case.

gaoxiaoliangz commented 5 years ago

I created a forked version for my use case https://github.com/gaoxiaoliangz/router. Just add useHashRouting to the Router component and you are good to go.