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:
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!