How to catch all unmatched route url's and map to the same component?

[rdgco]

This is more of a support question, and depending on the answer it could be an issue or limitation.

I have followed the solution presented here: https://github.com/kitze/mobx-router/issues/77#issuecomment-549353800, as an attempt to have a component rendered when none of the routes are matched by the current url. For example. the solution recommends having a catchAll view:

const views = {
  home: new Route({path: '/', component: <Home />}),
  // ... all valid routes should be listed here 
  catchAll: new Route({path: '/:unknown_url', component: <ErrorPage />})
};

This works for me only for unmatched url's that have only one level in the path. For example:

• https://myapp/component -> goes to Home component.
• https://myapp/blah -> goes to ErrorPage
• https://myapp/blah/blah -> goes to no component, because the url doesn't match: /:unknown_url. What really happens in mobx-router when there is no view match like this?

Is there a way to implement a catchAll that handles the entire set of url's that do not match the specified urls in the routes, regardless of how many levels there are in the url path.

Thanks!

[rdgco]

I was able to solve this by writing a different MobxRouter.

import React from 'react';
import { observer, inject } from 'mobx-react';

const MobxRouterWithErrorHandlingFunc = ({ store, store: { router } }) =>
    router.currentView && router.currentView.component ? (
        router.currentView.component
    ) : (
        <h3>
          Page Not Found.
        </h3>
    );

const MobxRouterWithErrorHandling = inject('store')(observer(MobxRouterWithErrorHandlingFunc));

export default MobxRouterWithErrorHandling;