Handle not found pages gracefully

Hi.

I apologize if I bring it up as a duplicate, but I’ve gone through all related issues and haven’t found a solution.

Expected behavior

I want to be able to control “not found” route behavior and render a dedicated react component (page) in that case. This is how I would expect it to work:

// routes.js
import { mount, route } from 'navi'
import Frontpage from './pages/Frontpage'
import About from './pages/About'
import Page404 from './pages/Page404'

export default mount({
  '/': route({ view: <Frontpage /> }),
  '/about': route({ view: <About /> }),
  '*': route({ view: <Page404 /> }),
})

// App.jsx
import React, { Suspense } from 'react'
import ReactDOM from 'react-dom'
import { Router, View } from 'react-navi'
import routes from './routes'

const render = module.hot ? ReactDOM.hydrate : ReactDOM.render

render(
  <Router routes={routes}>
    <Suspense fallback={null}>
      <View />
    </Suspense>
  </Router>,
  document.getElementById('root'),
)

Current behavior

The route associated with the “*” wildcard doesn’t render. Instead, I get a blank page and the following client-side error:

Uncaught NotFoundError: URL not found: /abouts
    at createNotFoundChunk (webpack-internal:///./node_modules/navi/dist/es/Chunks.js:27:16)
    at eval (webpack-internal:///./node_modules/navi/dist/es/createChunksMatcher.js:54:110)
    at step (webpack-internal:///./node_modules/navi/dist/es/createChunksMatcher.js:28:23)
    at Object.eval [as next] (webpack-internal:///./node_modules/navi/dist/es/createChunksMatcher.js:9:53)
    at eval (webpack-internal:///./node_modules/navi/dist/es/Matcher.js:55:29)
    at step (webpack-internal:///./node_modules/navi/dist/es/Matcher.js:27:23)
    at Object.eval [as next] (webpack-internal:///./node_modules/navi/dist/es/Matcher.js:8:53)
    at step (webpack-internal:///./node_modules/navi/dist/es/createChunksMatcher.js:13:139)
    at Object.eval [as next] (webpack-internal:///./node_modules/navi/dist/es/createChunksMatcher.js:9:53)
    at eval (webpack-internal:///./node_modules/navi/dist/es/Matcher.js:55:29)

Another error specifies that the previous one has originated from the View I have:

The above error occurred in the <View> component:
    in View
    in Suspense
    in HashScroll (created by NaviProvider)
    in NaviProvider (created by Router)
    in Router

[jamesknelson]

@kettanaito, is there any reason that <NotFoundBoundary> won’t work for you?

https://frontarm.com/navi/en/reference/react-components-hooks/#notfoundboundary

[jamesknelson]

Not at the moment, unfortunately. It might be worth opening an issue on create react app, as I feel like showing an error screen even on handled errors is an issue there.