Plugin: React Router Integration idea about hookstate

[avkonst]

BTW, I use hookrouter with typescript. There are external typings developed by somebody else. No issues so far.

[avkonst]

Hi! Happy New Year.

I personally use https://www.npmjs.com/package/hookrouter but it is the same sort of things. So can be done.

Do you think this is useful?
Maybe it is useful.

Or it should not be part of hookstate plugins?
I expect plugins can be anything. People may choose what they want and what they do not want to include. My goal is to keep core on purpose and small.

I have got rough ideas how this plugin could work. But could you please elaborate in a bit more details and maybe with code samples how you expect to use / interact with it?

[praisethemoon]

Thanks for pointing out that library! However its owner makes some bold statements of not using typescript 😅

Inspired by that library, I could think of something as follows

 
const routes = {
    '/': () => <HomePage />,
    '/about': () => <AboutPage />,
};

const About = () => {
   const location = useLocation()
   return (
      <button disabled={location.at('/home')}>Go Home</button>
   )
}
  
const MyApp = () => {
    const routeResult = useRoutes(routes, (newRoute => {
         console.log('moving to new route ', newRoute.location)
    }));
    return routeResult || <NotFoundPage />;
}

This may seem as a rewritee of some existing stuff, but I think having hookstate as single dependency for all kind of state is really cool!

[avkonst]

It can be cool, but hard to achieve. Conceptually, history stack of a browser is also a state. The only plugin I can think of is the one, which does 2-way sync between StateLink and History.

Even if 2-way sync is possible, there are things to think about. For example, Browser History state supports append, drop, replace operations. StateLink.set() would need some context in order to correctly map current route state to History operation.

PS: context feature is planned, I need it for some other things. I exploring it and have got understanding how context will work. Basically, set/merge will receive additional custom user's information about set/merge action. This context will propagate to plugin callbacks.

[avkonst]

@praisethemoon hi, have you though more about this ticket? I am not sure how to progress it further...

[praisethemoon]

Hi! Well, I honestly still believe that a hookstate router plugin would really be neat! In my app I have a scenario where I would want to redirect pages pased on iosocket income. I didn't figure out of a fix because I did not concentrate on it but it makes me think how cool would it be to have such a feature at disposal. If you think it is unnecessary for the upcoming months then feel free to close the ticket. Otherwise, if there anything I can help with (given my limited knowlede about this) let me know!

[ppwfx]

we're using hookrouter in conjunction with hookstate as well, really slim and efficient stack!

[avkonst]

Hi,

The Hookstate is moving towards version 2. Please read the updated docs here: https://hookstate.js.org/

I have decided to close this ticket as I do not see that Hookstate will integrate with a router in near future. It still does not stop apps to put the current path to the state on navigation and render accordingly.