Cannot render redirection to async route from NavNotFoundErrorBoundary

I have web app which instead of rendering “not found” page redirects to home page.

Example code: https://frontarm.com/demoboard/?id=1f95147d-e713-4d80-a22a-af880c6810f2

I’m trying to do it this way:

function renderNotFound() {
  return (
    <NavHistory>{(history) => history.push('/about')}</NavHistory>
  )
} 

// [...]
<NavNotFoundBoundary render={renderNotFound}>
  <NavContent />
</NavNotFoundBoundary>

and it works correctly when my page’s getContent() returns content immediately, but when I try to redirect to async page

'/about': Navi.createPage({
      title: 'The createSwitch() function',
      getContent: () => import('./about.mdx'),
    }),

it fails with following errors in console:

Uncaught Error: URL not found: /abc/
    at createNotFoundSegment (VM168 navi.js:322)
    at class_1.NodeMatcher.getResult (VM168 navi.js:363)
    at class_1.SwitchMatcher.execute (VM168 navi.js:872)
    at class_1.NodeMatcher.getResult (VM168 navi.js:356)
    at RouteObservable.refresh (VM168 navi.js:1336)
    at RouteObservable.handleChange (VM168 navi.js:1321)
    at RouteObservable.subscribe (VM168 navi.js:1359)
    at CurrentRouteObservable.handleURLChange (VM168 navi.js:1256)
    at CurrentRouteObservable.refresh (VM168 navi.js:1180)
    at new CurrentRouteObservable (VM168 navi.js:1164)
The above error occurred in the <InnerNavContent> component:
    in InnerNavContent (created by Context.Consumer)
    in NavContent (created by Context.Consumer)
    in InnerNotFoundBoundary (created by Context.Consumer)
    in ErrorBoundary (created by Context.Consumer)
    in main (created by Context.Consumer)
    in div (created by Context.Consumer)
    in NavLoading (created by App)
    in Suspense (created by NavProvider)
    in NavProvider (created by App)
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, InnerNotFoundBoundary.

Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at invariant (VM167 react-dom.development.js:49)
    at scheduleWork (VM167 react-dom.development.js:18530)
    at Object.enqueueSetState (VM167 react-dom.development.js:12437)
    at NavProvider.Component.setState (VM166 react.development.js:460)
    at Object.NavProvider._this.handleNavigationSnapshot [as next] (VM173 react-navi.js:335)
    at MapObserver.next (VM168 navi.js:1963)
    at CurrentRouteObservable.handleURLChange (VM168 navi.js:1226)
    at VM168 navi.js:1163
    at listener (VM171 history.js:878)
    at VM171 history.js:897

The above error occurred in the <Context.Consumer> component:
    in NavHistory (created by InnerNotFoundBoundary)
    in InnerNotFoundBoundary (created by Context.Consumer)
    in ErrorBoundary (created by Context.Consumer)
    in main (created by Context.Consumer)
    in div (created by Context.Consumer)
    in NavLoading (created by App)
    in Suspense (created by NavProvider)
    in NavProvider (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Uncaught (in promise) Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at invariant (VM167 react-dom.development.js:49)
    at scheduleWork (VM167 react-dom.development.js:18530)
    at Object.enqueueSetState (VM167 react-dom.development.js:12437)
    at NavProvider.Component.setState (VM166 react.development.js:460)
    at Object.NavProvider._this.handleNavigationSnapshot [as next] (VM173 react-navi.js:335)
    at MapObserver.next (VM168 navi.js:1963)
    at CurrentRouteObservable.handleURLChange (VM168 navi.js:1226)
    at VM168 navi.js:1163
    at listener (VM171 history.js:878)
    at VM171 history.js:897

[jamesknelson]

Thanks for filing this issue. I’ve run into a couple update loops myself, and I’d really like to find a longer term fix so that people don’t run into them anymore.

I think part of the problem is the way the history package is designed, although unfortunately we’re kind of stuck with it for react-router compatibility.

Until we find a better fix though, would you be able to find some time to add a note to the docs?

[jamesknelson]

These have mostly just lost the Nav prefix. You can see the component names here:

https://github.com/frontarm/navi/tree/master/packages/react-navi/src