Dynamic routing validation

[alexeybondarenko]

Hi! Thank you for this great library!

I'm looking for a solution for displaying 404 error page without a redirect. I think It will be great If we can abort a matched route and find next one.

Example:

<Router>
 <Route path="item/:id" component={ItemPage} />
 <Route path="*" component={NotFoundPage} />
</Router>

So, can we modify the library to do this?

[dlmr]

Hello!

Do I understand you correctly that you want a way to manage when a hook fails for some reason, like when doing a request to an API, and then use the * route?

I don't think we can do this given how React Router works. A pattern I have used personally in projects is to render another component when this happens.

Example

@provideHooks({
  fetch: ({ params: { id }, setProps }) =>
    fetch(`/api/items/${id}`)
      .then(response => response.json())
      .then(item => setProps({ item }))
      .catch(error => setProps({ error }))
})
export default class ItemPage extends Component {
  render() {
    if (this.props.error) {
      return <NotFoundPage />;
    }

    return <Item item={this.props.item} />;
  }
}

If the application is using Redux I often make the application wrapper connect to the store and manage errors in a central place instead for a specific page.

[alexeybondarenko]

Hi, @dlmr.

I use this way too, but I hope we can find universal solution to make DRY our projects and don't repeat this code

if (this.props.error) {
      return <NotFoundPage />;
    }

[dlmr]

I very open for suggestions on how this API could look/function. 🙂

My personal solution as I mention above is to handle this in the root component with the help of Redux in complicated applications.