View on GitHub

mo360-ftk

MO360 Frontend Toolkit: A toolkit for single page applications (SPA) based on React and Typescript that allows to extract single features into microfrontends.

API: RouterService

See also: Examples RouterService

Access through injection:

import { inject, withInject, RouterService } from '@daimler/ftk-core';
// ...
class Example extends React.Component<{}, {}> {
  @inject()
  public router!: RouterService;
  // ...
}

export default withInject(Example);

Access through hook

import { useRouter } from '@daimler/ftk-core';
// ...
const router = useRouter();
// ...

getRoute()

getRoute(): {
    name: string;
    url: string;
    parameter: any;
    query: any;
}: IRoute;

The getRoute Method provides the current route and an easy way to access the route- and query-params. ___

linkTo()

linkTo(
    name: string,
    parameter?: object,
    query?: object
): string;

The linkTo Method provides the URL of a route, specified by its parameters. ___

linkToHome()

linkToHome(): string;

The linkToHome Method provides the URL of the Home-route. ___

navigate(url: string): void;

The navigate Method navigates to a given URL. ___

navigateToHome(): void;

The navigateToHome Method navigates to the Home-route. ___

Not implemented yet: navigateTo()

navigateTo(
  name: string,
  parameter?: object,
  query?: object
): void;

TODO: :wrench: Implement a method, that navigates directly to a route, specified by its parameters. __ __

When using Swidgets, the router takes care of nested routing. So a route-change within the Swidget will also change the route of the host-application. This also works with multiple Swidgets, that are loaded at the same time, as long as: