Navigation

With AppShell’s navigation helpers, micro frontend applications can trigger a redirect navigation to the main application it resides in. To achieve this, you’ll need to implement the necessary methods and pass it to the AppShellProvider component.

It’s not important which routing library you use to integrate navigation capabilities in your application. You just need to implement given navigation helper methods with your application logic.

Overview

The AppShell manages navigation through the ApplicationNavigation interface, which defines how navigation actions are handled across the application. This approach ensures consistency in navigation behavior and allows for optimizations such as preloading and lazy loading of resources.

This setup allows micro frontends to request navigation through the AppShell, maintaining loose coupling between components.

import { AppShellProvider, type ApplicationNavigation } from '@akinon/app-shell';
 
const App = () => {
  const navigation: ApplicationNavigation = {
    navigate: ({ path: '...' }) => {
      // Implement the navigation logic here
    }
  };
 
  return (
    <AppShellProvider
      apps={...}
      data={...}
      navigation={navigation}
      actions={...}
    >
      {/* Your application components go here */}
    </AppShellProvider>
  );
};
 
export default App;

Type

/**
 * Provides a mechanism for navigating within the application.
 *
 * @typedef {Object} ApplicationNavigation
 * @property {(payload: ApplicationNavigationPayload) => void} navigate - A function that performs navigation to the
    specified URL.
 */
interface ApplicationNavigation {
  navigate: (payload: ApplicationNavigationPayload) => void;
}
 
interface ApplicationNavigationPayload {
  path: string;
  id?: number;
}

With this implementation, micro applications will have the ability to redirect main application to desired path.