How to make default route display an application in single-spa without adding activeWhen function

1.7k Views Asked by At

I am using single-spa framework and most things are going well.

Using the single-spa-layout I have added a default route which should be displayed when the url does not match a route that I have defined. This works properly if the child of the default root is just some html node/s e.g.

<template id="single-spa-layout">
  <single-spa-router mode="history" base="/">
    <route default>
      <h1>404 - No page mathes the URL</h1>
    </route>
      <route path="login">
        <application name="@my-company/mf-login"></application>
      </route>
  </single-spa-router>
</template>

My problem is that if I want to route to particular application (mf-default in my case) in the default root instead it does not show unless I register my application and provide the activeWhen() function just like I would with all my other applications e.g

<template id="single-spa-layout">
  <single-spa-router mode="history" base="/">
    <route default>
      <application name="@my-company/mf-default"></application>
    </route>
      <route path="login">
        <application name="@my-company/mf-login"></application>
      </route>
  </single-spa-router>
</template>
registerApplication({
  name: "@my-company/mf-default",
  app: () => {
    return System.import("@my-company/mf-default");
  },
  activeWhen: () => shouldBeActive,
});

I am not sure why I would need to provide the logic for when the default 404 application should be displayed (in my example this is the shouldBeActive part) as it already knows if the URl matched a known route, as evidenced by the fact that my first example works and only shows that HTML whenever the route genuinely doesn't match.

Can anybody enlighten me as to how this should work please. I definitely need to display more than just some hardcoded HTML for a 404 - I need to display a specific application in this case my mf-default application.

I should state that if I set shouldBeActive to true then the 404 application is indeed displayed so there is no technical limitation that disallows it. But I am not understanding why I need to provide activeWhen() function for this case at all as the framework already knows when a route doesn't match.

Even having access to the function that the framework uses to calculate a routeMatch would help as I could reuse that.

Any help on this would be greatly appreciated. I'm sure an answer on this could be helpful to others too. Thanks

0

There are 0 best solutions below