Skip to main content

How-to

Setting when actions should be performed during SPA transitions​

By default, SPA transitions execute actions after defining the next route and after the actual transition. It is possible to change this behavior and make the execution of actions before a transition itself. Note, that in this case a page will be displayed immediately with new data, but it can cause a noticeable visual lag if actions are taken long enough.

Configurable explicitly when using the routing module:

import { createApp } from '@tramvai/core';
import { SpaRouterModule } from '@tramvai/module-router';

createApp({
  modules: [
    SpaRouterModule.forRoot([], {
      spaActionsMode: 'before', // default is 'after'
    }),
  ],
});

or through token ROUTER_SPA_ACTIONS_RUN_MODE_TOKEN:

import { ROUTER_SPA_ACTIONS_RUN_MODE_TOKEN } from '@tramvai/module-router';
import { provide } from '@tramvai/core';

const providers = [
  // ...,
  provide({
    provide: ROUTER_SPA_ACTIONS_RUN_MODE_TOKEN,
    useValue: 'before',
  }),
];

Load route config from external api​

Create ROUTE_RESOLVE_TOKEN provider, where you need to fetch and return new route object (route will be registered in beforeResolve transition hook):

import { provide } from '@tramvai/core';
import { ROUTE_RESOLVE_TOKEN } from '@tramvai/module-router';

const provider = provide({
  provide: ROUTE_RESOLVE_TOKEN,
  // will be executed for every navigation, when corresponding route is not defined in application
  useValue: async (navigation) => {
    const route = await fetchRouteFromExternalApi(navigation);

    if (route) {
      return route;
    }
  },
});

How to transform every route befor usage​

Create ROUTE_TRANSFORM_TOKEN multi provider, where you can change route object directly:

import { provide } from '@tramvai/core';
import { ROUTE_TRANSFORM_TOKEN } from '@tramvai/module-router';

const provider = provide({
  provide: ROUTE_TRANSFORM_TOKEN,
  // in this example, paths for every routes will be modified
  useValue: (route) => {
    return {
      ...route,
      path: `/prefix${route.path}`,
    };
  },
});

App behind proxy​

Router doesn't support proxy setup directly. But proxy still can be used with some limitations:

  • setup proxy server to pass requests to app with rewriting request and response paths. (E.g. for nginx)
  • it won't work as expected on spa navigation on client, so only option in this case is use the NoSpaRouter