Using Navi with react-router

Navi is designed to work alongside react-router. This is made possible because react-router interacts with the browser history API using a separate history package — which can be shared with Navi by passing it to your <Router> component or createBrowserNavigation() call.

In order to use Navi with react-router, you’ll just need to render your <Router> element within the handler for a react-router <Route>. You’ll also need to pass in history and basename props to get your Navi router to sync up with react-router.

Here’s an example:

import React, { Suspense } from 'react'
import { Router, View } from 'react-navi'
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'
import { routes } from './routes'
import Index from './Index'

// Here's your react-router app
export default function App(props) {
  return (
        <Route path="/" exact component={Index} />
        <Route path="/support" render={({ history, match }) =>
            <Suspense fallback={null}>
              <View />
        } />
Build In Progress

Avoid using react-router within Navi content

Because react-router handles navigation synchronously while Navi handles it asynchronously, you’ll always want your Navi routes to be nested within the react-router routes — never the other way around.

Unfortunately, this means that Navi’s static generation tools will not work with an app that uses react-router — but you’ll still get async content, page title and scroll management, and all the rest of Navi’s features!