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 likeuseViewElement()
, but returns an object with the raw view and head content, and aconnect()
function that you’ll need to wrap the rendered view with. You can think of it like the render-prop version of<View>
.
<Link>
hooks
useLinkProps(props)
accepts a subset of the same props as a<Link>
, and returns an object withhref
,onClick
, and any other props that you’d want to spread onto an<a>
.useActive(href)
returnstrue
when the current route matches the specified href. You can use this along withuseLinkProps
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
andtitle
options, there’s just two steps to upgrade:- Add the
react-navi-helmet
orreact-navi-helmet-async
package
npm install --save react-navi-helmet-async
- 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') )
- Add the
0.12
Adds a number of new features:
navigation.navigate()
returns a promise to the new Route.crawl()
takes yourroutes
object, and returns a list of all urls/redirects.- Support for
*
routes onmount()
. withState()
androute({ state })
allows you to store some serialized state that will be passed into the route viarequest.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.