Let's see the example in the document. Async data fetch can fail. What to do if I want to prevent routing on the error?
import React from 'react'
import { mount, redirect, route } from 'navi'
import { QuoteView, fetchQuote } from './helpers'
const routes = mount({
'/': redirect('/quotes/1'),
// The ':id' segment will match any value, and its value is made
// available within the route at `req.params.id`.
'/quotes/:id': route(async req => {
let id = req.params.id
let [failed, quote] = await fetchQuote(id) // This can fail
if (failed) {
// Show an error message
// Tell navi do not route
}
return {
view: <QuoteView id={id} quote={quote} />,
}
})
})
export default routes
To handle this, you can use a map() instead of a route(). Then, you can return a different route or redirect depending on whether the request succeeds or fails.
Let's see the example in the document. Async data fetch can fail. What to do if I want to prevent routing on the error?