Navi

Declarative, asynchronous routing for React.

Use functions, promises and async/await to map URLs to data and views. Use asynchronous data in your components, without touching component state. Pre-render for SEO — without ejecting from create-react-app!

Navi is modern router for React that uses Suspense, Hooks and function composition to make real-world routing simple.


Try Navi.

Navi is just a library, and so it works great with both new and existing apps.

Unimplemented.

The quickest way to try Navi is to play with the embedded editor below. It demonstrates how to implement a simple site selling hats and flamethrowers, including the basics of routing, linking, code splitting, and SEO.

To quickly try Navi in a new project, you can start with a create-react-app based template:

  • create-react-navi-app
    Creates a project skeleton using create-react-app, then adds a couple apps and static rendering.

  • create-react-blog
    Creates a project skeleton using create-react-app, then adds routes generated from your filesystem structure, static rendering, pagination, tags, MDX, an RSS feed, a Netlify deploy script, and a theme inspired by Dan Abramov’s overreacted.io, for a ready-to-go blog.

Or if you’d like to see how simple it is to add Navi to your own create-react-app project, head on over to Getting Started guide.

Oh, and if you already have an app built with react-router? Then adding Navi is ridiculously easy — just mount your Navi routes within a react-router <Route>. For details, see the guide to integrating with react-router.

Try a live example.

index.js
product.js
Landing.js
Layout.js
api.js
styles.css
import { mount, route, lazy } from 'navi'
import React, { Suspense } from 'react'
import ReactDOM from 'react-dom'
import { Router, View } from 'react-navi'
import api from './api'
import Landing from './Landing'
import Layout from './Layout'

// 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')
)
Build In Progress

Jump to…