Loading-Modules.md

👈 Return to Overview

Loading Modules

In either the Server or the Browser, there are two methods to select and load specific Holocron Modules:

• Use Routes defined in the child routes configuration to match a URL path to a Holocron Module.
• Use dispatch-able methods in the Holocron API to load Holocron Modules and render their contents with a React Component.

Both methods are described in the following.

Contents

• Route Component
  • ModuleRoute
• Load and Render
  • RenderModule
  • Module.holocron
  • composeModules

Route Component

👍 Most commonly used method to load Holocron Modules

A parent Module may add the ModuleRoute routing component to the childRoutes Module Lifecycle Hook to load a child Module dynamically on the server or browser when matching a route path. Once the Module is loaded, it is injected as a JSX element into the children prop of the parent Module.

ModuleRoute

Similar to One App Router's <Route> with an additional prop, moduleName, ModuleRoute loads a Holocron Module when the URL matches the given path.

<ModuleRoute path="/home" module-name="my-module" />;

Please see ModuleRoute in the Holocron Module Route API.

Dispatch and Render

We may use the Holocron Module Configuration to dispatch Holocron Redux Actions. Using the loadModuleData function we dispatch composeModules to retrieve a child Module bundle (e.g. mymodule.browser.js) and pass React props to it. Once loaded, a parent Module may add the RenderModule React Component into their JSX to render loaded Holocron Modules.

RenderModule

Please see RenderModule in the Holocron API.

Module.holocron

Please see Holocron Module Configuration in the Holocron API.

composeModules

Please see composeModules in the Holocron API.

☝️ Return To Top