There’s a new library called Navi. It’s really cool for small apps because it’s not a framework itself, but an enhancer of CRA (create-reacrt-app) that gives the developer:
- Routing with async data fetching.
- Static page rendering.
In my opinion, setting up the static page rendering looks very complex.
The routing with async data fetching looks simple enough:
// Define routes using mount(), route(), and other simple functions.
const routes =
mount({
'/': route({
title: "Hats 'n' Flamethrowers 'r' Us",
getData: () => api.fetchProducts(),
view: <Landing />,
}),
'/product': lazy(() => import('./product')),
})
// Then pass your routes to a `<Router>`, and render them with `<View>`.
ReactDOM.render(
<Router routes={routes}>
<Layout>
<Suspense fallback={null}>
<View />
</Suspense>
</Layout>
</Router>,
document.getElementById('root')
But the router state sits out of the state manager and that is a problem when other parts of your state want to know about the router. I’m sure you can sync both but why have the router logic and state outside of your state manager in the first place?