Release History 📜

For details on minor releases, see the changelog file.

0.13

This release exposes four new hooks, and uses these hooks internally within <View> and <Link>. This results in less clutter in the dev tools and error traces, more power for creating custom components, and easy implementation of animated transitions.

<View> hooks

  • useViewElement() returns the element that would have been rendered by <View />. This makes animated transitions far simpler, as you can keep the element in state and it’ll always render the same view as when it was first created.

  • useView() is like useViewElement(), but returns an object with the raw view and head content, and a connect() function that you’ll need to wrap the rendered view with. You can think of it like the render-prop version of <View>.

  • useLinkProps(props) accepts a subset of the same props as a <Link>, and returns an object with href, onClick, and any other props that you’d want to spread onto an <a>.

  • useActive(href) returns true when the current route matches the specified href. You can use this along with useLinkProps to create your own custom styled links.

Deprecations

The render-prop versions of <Link> and <View> have been deprecated in favor of the above hooks. Support for the render props will be dropped in a future release.

Breaking Changes

  • React 16.8+ is now required, as hooks are now used internally.

  • Previously deprecated properties and exports have been removed.

  • Instead of automatically integrating with react-helmet, you’ll need to wrap your app with a Helmet provider. This change was necessary to allow people to use react-helmet-async, which is required for SSR.

    If you want to handle the page <head> without Navi, then no changes are required.

    If you want to continue to use Navi’s head and title options, there’s just two steps to upgrade:

    1. Add the react-navi-helmet or react-navi-helmet-async package
    npm install --save react-navi-helmet-async
    1. Import the default <HelmetProvider>, and wrap your app with it:
    import HelmetProvider from 'react-navi-helmet-async'
    
    ReactDOM.render(
      <HelmetProvider>
        <Router routes={routes}>
          ...
        </Router>
      </HelmetProvider>,
      document.getElementById('root')
    )

0.12

Adds a number of new features:

  • navigation.navigate() returns a promise to the new Route.
  • crawl() takes your routes object, and returns a list of all urls/redirects.
  • Support for * routes on mount().
  • withState() and route({ state }) allows you to store some serialized state that will be passed into the route via request.state next time it is loaded. This state is persisted between server and client, allowing for data to be fetched on the server side or during static render, and then displayed on the client.