Ramblings on Web Development and Software Architecture

Posted  a year ago


Hash based routing with react-navi

Navi is an simple and easy-to-use routing solution for React with good support for suspense and asynchronous data-fetching.

I generally prefer hash-based routing over push state based routing because it doesn’t require any special handling on the server side and works well even with file urls & electron apps. Also, working mostly with intranet applications, SEO is generally not a concern for me.

Thanks to the underlying history library, it is relatively straightforward to use hash-routing with react-navi:

As the example in the home page illustrates, we can pass our routes to the mount function:

However instead of passing these routes directly to the <Router> component, we’d need to create a navigation that is configured to use our hash-based history.

And then we can render the Router with this navigation:

That is pretty much all that’s needed