How to use navi - 10 common examples

import { mount, route } from 'navi'

export default mount({
  '/': route({
    title: "React Site",
    getView: () => import('./index.mdx')
  }),
    
  '/getting-started': route({
    title: "Getting Started",
    getView: async () => {
      // This simulates some async content loading, so that
      // you can test the site's loading bar.
      await new Promise(resolve => setTimeout(resolve, 1000))

      return import('./getting-started.mdx')
    }
  }),
})

import { map, route, withView } from 'navi'

export default map({
  '/': route({
    title: "React Site",
    getView: () => import('./index.mdx')
  }),
    
  '/getting-started': route({
    title: "Getting Started",
    getView: async () => {
      // This simulates some async content loading, so that
      // you can test the site's loading bar.
      await new Promise(resolve => setTimeout(resolve, 1000))

      return import('./getting-started.mdx')
    }
  }),
})

import { mount, route } from 'navi'

export default mount({
  '/': route({
    title: "React Site",
    getView: () => import('./index.mdx')
  }),
    
  '/getting-started': route({
    title: "Getting Started",
    getView: async () => {
      // This simulates some async content loading, so that
      // you can test the site's loading bar.
      await new Promise(resolve => setTimeout(resolve, 1000))

      return import('./getting-started.mdx')
    }
  }),
})

import React from 'react'
import { mount, route } from 'navi'

export default mount({
  '/': route({
    title: 'Home',
    head: <>
      
    ,
    getView: () => import('./index.mdx')
  }),
    
  '/about': route({
    title: "About",
    getView: async () => {
      // This simulates some async content loading, so that
      // you can test the site's loading bar.
      await new Promise(resolve => setTimeout(resolve, 1000))

      return import('./about.mdx')
    }

import { lazy, mount, route } from 'navi'

const routes = mount({
  '/': route({
    // Add a title to the route, which will be automatically used as
    // the document's `<title>`.
    title: 'Home',
  
    // Define the content which will be rendered in place of the react-navi
    // `&lt;View /&gt;` component. Dynamically import the view, so that it isn't
    // loaded until needed.
    getView: () =&gt; import('./home/view')
  }),
    
  // Dynamically import the entire '/about' route, so that it isn't loaded
  // until needed.
  '/about': lazy(() =&gt; import('./about/route')),
})

export default routes</title>

import { map, route, withView } from 'navi'

export default map({
  '/': route({
    title: "React Site",
    getView: () => import('./index.mdx')
  }),
    
  '/getting-started': route({
    title: "Getting Started",
    getView: async () => {
      // This simulates some async content loading, so that
      // you can test the site's loading bar.
      await new Promise(resolve => setTimeout(resolve, 1000))

      return import('./getting-started.mdx')
    }
  }),
})

...context,
      tagsRoot: req.mountpath,
    }),
  ),
  withCrawlerPatterns({
    '/:tag': async (req, context: TagsNavContext) => {
      if (!context.crawlingRoutes) {
        return getAvailableTagsFromRoutes(
          await crawlRoutes(context.blogRoot),
        ).map(tag => '/' + tag)
      }
      return []
    },
  }),
  mount({
    '/': route({
      title: 'Tags',

      getView: async (req, context) => {
        // Build a list of pages for each tag
        let routes = await crawlRoutes(context.blogRoot)
        let tags = getAvailableTagsFromRoutes(routes)
        let tagRoutes = fromPairs(tags.map(name => [name.toLowerCase(), []]))
        routes.forEach(route => {
          let data = route.data
          if (data && data.tags) {
            data.tags.forEach(tag => {
              tag = tag.toLowerCase()
              if (tagRoutes[tag]) {
                tagRoutes[tag].push(route)
              }
            })

// Put posts under "/posts", so that they can be wrapped with a
    // "" that configures MDX and adds a post-specific layout.
    '/posts': compose(
      withView((req, context) => ),
      mount(fromPairs(posts.map(post => ['/' + post.slug, post.getPage]))),
    ),

    // Miscellaneous pages can be added directly to the root switch.
    '/tags': lazy(() => import('./tags')),
    '/about': lazy(() => import('./about')),

    // Only the statically built copy of the RSS feed is intended to be opened,
    // but the route is defined here so that the static renderer will pick it
    // up.
    '/rss': route(),
  }),
)

export default routes

// Put posts under "/posts", so that they can be wrapped with a
    // "" that configures MDX and adds a post-specific layout.
    '/posts': compose(
      withView((req, context: AppNavContext) => ),
      mount(fromPairs(posts.map(post => ['/' + post.slug, post.getPage]))),
    ),

    // Miscellaneous pages can be added directly to the root switch.
    '/tags': lazy(() => import('./tags')),
    '/about': lazy(() => import('./about')),

    // Only the statically built copy of the RSS feed is intended to be opened,
    // but the route is defined here so that the static renderer will pick it
    // up.
    '/rss': route(),
  }),
)

export default routes

// "" that configures MDX and adds a post-specific layout.
    '/posts': compose(
      withView((req, context) => (
        
      )),
      mount(fromPairs(posts.map(post => ['/' + post.slug, post.getPage]))),
    ),

    // Miscellaneous pages can be added directly to the root switch.
    '/tags': lazy(() => import('./tags')),
    '/about': lazy(() => import('./about')),

    // Only the statically built copy of the RSS feed is intended to be opened,
    // but the route is defined here so that the static renderer will pick it
    // up.
    '/rss': route(),
  }),
)

export default routes