Navi English

日本語

Translate this page 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 fiddling with effects or component state. Pre-render for SEO — without even ejecting from create-react-app! Navi is a modern router for React that uses Suspense, Hooks and function composition to make real-world routing simple. Get Started GitHubMIT Licensed

Navi ❤️ async / await To get the most out of Navi, you’ll need a solid understanding of JavaScript Promises and the new async / await syntax. If you want to improve your async / await and Promises skills, Frontend Armory’s Mastering Async JavaScript course will guide you through everything you need to know.

Try Navi.

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

npm install navi react-navi

The easiest way to try Navi is to mess around with the editor below. It introduces the basics of routing, linking, code splitting, and SEO with a silly example about hats and flamethrowers.

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 pages 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 the 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 Fork 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 middleware. 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…