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:

App.js
routes.js
Index.js
index.js
styles.css
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 (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Index} />
        <Route path="/support" render={({ history, match }) =>
          <Router 
            routes={routes}
            history={history}
            basename={match.url}
          >
            <Suspense fallback={null}>
              <View />
            </Suspense>
          </Router>
        } />
      </Switch>
    </BrowserRouter>
  )
}
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!