Routing in a module [OLD BASE TEMPLATE]¶

Routing in an app that is embedded via module federation is a challenging task because, by design, a module is planned to function as a small sub-component and a whole application that is used to work separately from the main application.

To achieve a navigation system that works in harmony with the main application (HortiView), we need to control both routers:

• router of HortiView
• router of the module

Because, in most cases, routing in a single-page application is realized with a router solution like react-router, we have two routing solutions working simultaneously in the application in the following flow:

Example 1 | Open the module¶

1. The user clicks on a link to a module.
2. The HortiView-Router routes the user to the module's base path /farm/modules/[moduleid].
3. The base template has an implementation/wrapper around the navigate function that always includes the base path to each route as a prefixed absolute path.
4. The Module-Router checks its definition of routes and opens its root route /.

Example 2 | Navigate within the module¶

1. The user clicks on a link in the module (that executes a routing/navigation function) /subpage.
2. The navigate function executes the navigateFunc function, which represents the navigateTo function of the HortiView-Router.
3. The HortiView-Router navigates to the new page /farm/modules/[moduleid]/subpage.
4. The URL changes and the history is extended by the new route. Because HortiView doesn't have any route definition for this route except for the module's base path, it won't execute any routing logic and keeps the module loaded (due to an implementation of the module's base path with a wildcard).
5. The change of the route/URL will change the Base-Property currentNavigationPath.
6. The property change will trigger the module's navigation again.
7. The Module-Router calls its navigate function, and the router loads the implementation/component behind /subpage but with an implementation that doesn't change the browser's history.

Implementation Example¶

To implement a proper navigation, that works within your module and HortiView, we would highly recommend, to use the template solution, or atleast the modulebase.

The modulebase solves all navigation issues, by pre-implement and setup a react-router of the latest version.

ModuleBase to get react router¶

  import { BaseProps, ModuleBase } from "@hortiview/modulebase";
  import { ModulePadding } from "@hortiview/shared-components";
  import env from "../../environments.json";
  import { TranslationProvider } from "./providers/TranslationProvider";
  import { ROUTES } from "./RouteConfig";
  import { checkConfig } from "@hortiview/modulebase/dist/types/Environment";

  const App = (customProps: Readonly<BaseProps>) => {
    return (
      <ModulePadding>
        <TranslationProvider currentLanguage={customProps.currentLanguage}>
          <ModuleBase props={customProps} routes={ROUTES} env={checkConfig(env)} />
        </TranslationProvider>
      </ModulePadding>
    );
  };

  export default App;

Provide routes / RouteConfig¶

Every route can be configured in the most simple way:

export const ROUTES = [
  {
    path: "*",
    element: <NotFound />,
  },
  {
    path: "",
    element: <Home />,
  },
  {
    path: "testpage",
    element: <Testpage />,
  },
  {
    path: "example",
    element: <Example />,
  }
];

Its important, that the route-paths are relative (without slash in the beginning).

Navigate within the module¶

To navigate within a module, you can import the useNavigate hook from the modulebase and use it exactly as React Router implements it:

import { Button } from "@element-public/react-button";
import { TypoDisplay } from "@element-public/react-components";
import { Group } from "@element-public/react-group";
import { useLocation, useNavigate } from "@hortiview/modulebase";
import { useTranslation } from "react-i18next";

export const Home = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const { t } = useTranslation();
  return (
    <div>
      <Group>
        <TypoDisplay>This is the pathname: {pathname}</TypoDisplay>
        <Button onClick={() => navigate("/testpage")}>
          {t("template.navigateToTestpage")}
        </Button>
      </Group>
    </div>
  );
};

Implementation [Old Template/Deprecated]¶

The BaseTemplate contains 3 parts to make the navigation work correctly.

RouteConfig¶

Configuration of all possible routes, relative to the application.

6
7
8
9

export const RouteConfig: RouteDefinition = {
  Home: { path: "/", element: <Showcase /> },
  Testpage: { path: "/testpage", element: <Testpage />, translationKey: "testpage" },
};

Usage of RouteConfig¶

The configuration will be passed to the ModuleBase and used for the router implementation (of react-router-dom):

26
27
28
29

export const ModuleBase = ({ props, requiredProps, routes }: ModuleBaseProps) => {
  const { i18n, t } = useTranslation();
  const [open, setOpen] = useState(true);
  const setBaseProps = useBasePropsStore(state => state.setCustomProps);

63
64
65
66
67
68
69
70

  return (
    <>
      <SignalRProvider>
        <Routing basePath={props.basePath} routes={Object.values(routes)} />
      </SignalRProvider>
    </>
  );
};

Creation of the Module-Router¶

The routing component has a pretty basic implementation of a router (the Module-Router):

 9
10
11
12
13
14
15
16
17
18

export const Routing = ({ basePath, routes }: { basePath: string, routes: RouteConfig[] }) => {
  const buildRoute = useRouteBuilder(basePath);
  return (
    <Routes>
      {routes.map((route) => (
        <Route key={route.path} path={buildRoute(route.path)} element={route.element} /> 
      ))}
    </Routes>
  );
};

It uses the module's base path /farm/modules/[moduleid] to create a route that works in harmony with the HortiView-Router.

Combined Routing-Function¶

To finalize this setup, we configure a new routing function that implements the flow described in the two examples:

14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

const useRouting = () => {
  const currentNavigationPath = useBasePropsStore(state => state.currentNavigationPath);
  // Navigate in HortiView
  const navigateInHortiview = useBasePropsStore(state => state.navigateInHortiview);
  // Navigate in module
  const navigateInModule = useNavigate();
  //#region Navigation
  const navigate = useMemo(() => {
    if (currentNavigationPath) navigateInModule(currentNavigationPath, {replace: true});
    return (path: string) => {
      navigateInHortiview(path);
    };
  }, [currentNavigationPath, navigateInHortiview, standalone, navigateInModule]);
  //#endregion
  return navigate;
};