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!

Static Rendering« Previous Components and HooksNext »