#Usage with React

Your app’s <NavProvider> component is responsible for subscribing to the latest navigation state, and passing that state to Navi’s other components.

As a result, all other components must be rendered inside a <NavProvider>.

#Props

Your app’s Navigation object, as returned from createBrowserNavigation() or createMemoryNavigation()

This component can be used as a drop-in replacement for <a> tags. Internally, it renders an <a> tag so that statically rendered links will work even if JavaScript is disabled.

#Props

#active: boolean (optional)

Allows you to explicit enable or disable the activeClassName and activeStyle props.

#activeClassName: string (optional)

Will be added to your link’s className if the app’s current URL matches the href prop, or if the active prop is set to true.

#activeStyle: object (optional)

Will be merged into your link’s style if the app’s current URL matches the href prop, or if the active prop is set to true.

#exact: bool (optional)

If true, the link will only be considered to “match” the current URL if it is an exact match.

By default, a partial match at the beginning of the current URL will also be considered a match. This facilitates nav links, which often need to be highlighted when child pages are active.

#href: string (required)

The url to navigate to; identical to the href attribute of a HTML <a> tag.

#precache: boolean (required)

If specified, the linked page’s content will be loaded as soon as the link is rendered.

Renders the content for the outermost Switch or Page which has content that hasn’t been rendered yet.

If the content is a React element or component, then the render prop is optional, and that content will be rendered by default. Otherwise, you’ll need to provide a render prop to specify how to render the route content.

#Suspense

Available from react-navi 0.10+

When the page initially loads, it can be the case that no content is available — even for previous routes. In this case, <NavContent> will use React Suspense to pause execution until content is available. By default, this will cause your <NavProvider> and everything inside it to be left blank until content is available, however, you can show a fallback element while loading anywhere outside the <NavContent> by wrapping it with React’s <Suspense fallback> element — just as you’d wrap a component that is returned by React.lazy().

As React doesn’t yet support Suspense for server-side rendering, you’ll want to avoid using <Suspense> for statically rendered apps. Instead, wait for Navi’s initial content to render before calling ReactDOMServer.render() by using navigation.steady().

#Props

#children: (content, segment, route) ⇒ React.ReactNode (optional)

If provided, the component’s children must be a render prop that takes three the content, Segment and Route objects, and returns React element to render.

If a render prop is not provided, the default behavior is:

  1. If route.content contains a React element, render it.
  2. If route.content contains a function, then call it to get the rendered content.
  3. Otherwise, if route.status is busy, don’t render anything.
  4. Finally, if route.content isn’t a React element, and route.status isn’t busy, then throw an error.

#Examples

#Basic Usage

class App extends Component {
  render() {
    return (
      <NavProvider navigation={this.props.navigation}>
        <div className="App">
          <NavContent />
        </div>
      </NavProvider>
    );
  }
}

#Usage with render prop

By suppling a render prop, you can manually decide how to render your next route segment’s content.

class App extends Component {
  render() {
    return (
      <NavProvider navigation={this.props.navigation}>
        <div className="App">
          <NavContent>
            {content => 
              React.isValidElement(content)
                ? content
                : React.createElement(content)
            }
          </NavContent>
        </div>
      </NavProvider>
    );
  }
}

#Usage with React Suspense

Available from react-navi 0.10+

By wrapping your content in a React <Suspense> element, you can specify a fallback element to display while your app’s initial content is loading.

Note that this only makes sense for apps that are not pre-rendered with ReactDOMServer.render(). For static or server rendered apps, use navigation.steady() to wait for the initial content to load before hydrating the pre-rendered HTML with ReactDOM.hydrate().

import { Suspense } from 'react'

class App extends Component {
  render() {
    return (
      <NavProvider navigation={this.props.navigation}>
        <div className="App">
          <AppNavbar />
          <main>
            <Suspense fallback={<LoadingSpinner />}>
              <NavContent />
            </Suspense>
          </main>
        </div>
      </NavProvider>
    );
  }
}

A headless component that outputs the Route object for any page whose content is currently being fetche. If no page is currently being fetched, then it outputs undefined.

Use <NavLoading> to display a loading overlay when the user has requested a navigation that hasn’t completed yet.

#Example

class App extends Component {
  render() {
    return (
      <NavProvider navigation={this.props.navigation}>
        <NavLoading>
          {loadingRoute =>
            <div className="App">
              <BusyIndicator show={!!loadingRoute} />
              <NavContent />
            </div>
          }
        </NavLoading>
      </NavProvider>
    );
  }
}

Catches NotFoundError exceptions thrown by <NavContent />.

class App extends Component {
  render() {
    return (
      <NavProvider navigation={this.props.navigation}>
        <NavLoading>
          {loading =>
            <Nav.NotFoundBoundary render={() =>
              <h1>Not Found</h1>
            }>
              <div className="App">
                <BusyIndicator show={loading} />
                <NavContent />
              </div>
            </Nav.NotFoundBoundary>
          }
        </NavLoading>
      </NavProvider>
    );
  }
}

Allows you to access the history property of your app’s navigation object, through a render prop passed to the children prop.

This can be used to facilitate programmatic navigation.

Allows you to access the latest non-busy Route, which can be useful when you need to know the URL of the current page.

Accepts a render prop which will receive the Route object.

#Example

class App extends Component {
  render() {
    return (
      <NavProvider navigation={this.props.navigation}>
        <NavRoute>
          {route =>
            <div>Current URL: <strong>{route.url.href}</strong></div>
          }
        </NavRoute>
      </NavProvider>
    );
  }
}