Using Navi with react-helmet
Many React apps use react-helmet (and react-helmet-async) to manage their <head>
tags, so Navi has special support for rendering your route title
and head
with helmet. Setup is simple: just add the react-navi-helmet
or react-navi-helmet-async
package, and wrap your app with the exported HelmetProvider
:
npm install --save react-navi-helmet-async
import HelmetProvider from 'react-navi-helmet-async'
ReactDOM.render(
<HelmetProvider>
<Router routes={routes}>
...
</Router>
</HelmetProvider>,
document.getElementById('root')
)
With this, your <View />
components will now know how to render their associated title
and head
properties. In fact, this will even work for static rendering using navi-scripts
!
For details on how your <head>
is statically rendered, see the source for renderPageToString()
in react-navi/create-react-app.js.