SEO with <meta> and <title>

Navi lets you define title and head tags with each call to route():

index.js
import { createMemoryNavigation, mount, route } from 'navi'
import { Router } from 'react-navi'
import React from 'react'
import ReactDOM from 'react-dom'

const routes = mount({
  '/': route({
    title: 'My Great Page',
    head: <>
      <meta name="description" content="My Great description" />
      <script>
        console.log('hello from your document head')
      </script>
    </>,
    view: <div>My Great Page</div>
  })
})

ReactDOM.render(
  <Router routes={routes} />,
  document.getElementById('root')
)
Build In Progress

    The resulting title and head objects will be available on the current route object — but that’s it. Navi won’t automatically render these properties until you tell it how you’d like to render them. And currently, you have two options: react-helmet and react-helmet-async.

    The react-helmet and react-helmet-async integrations

    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!