ReactNavi 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:
|
1 2 3 4 5 |
import { createHashHistory } from 'history'; const history = createHashHistory(); |
As the example in the home page illustrates, we can pass our routes to the mount function:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { mount } from 'navi'; const routes = mount({ '/': route({ title: "Hats 'n' Flamethrowers 'r' Us", getData: () => api.fetchProducts(), view: <Landing />, }), '/product': lazy(() => import('./product')), }) |
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.
|
1 2 3 4 5 6 7 8 |
import { createBrowserNavigation } from 'navi'; const navigation = createBrowserNavigation({ history, routes }); |
And then we can render the Router with this navigation:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { Router, View } from 'react-navi'; ReactDOM.render( <Router navigation={navigation}> <Layout> <Suspense fallback={null}> <View /> </Suspense> </Layout> </Router>, document.getElementById('root') ) |
That is pretty much all that’s needed