Routing.md

👈 Return to Overview

Routing

One App uses @americanexpress/one-app-router, a fork of react-router@3 uplifted to work with React@^17, for its client and server side routing.

Contents

• Router
• Route
• childRoutes
• Link
• onEnterRouteHook

📘 More Information

• Loading Holocron Module via Route: ModuleRoute

Router

The primary component of One App Router. It keeps the UI and URL in sync. This is used internally within One App and should not be used within One App modules.

Please see One App Router's API docs for more information.

Route

<Route> is used to define the mapping between a path and component. For use with One App this must be defined within childRoutes defined on a module.

Please see One App Router's Route API docs for more information.

childRoutes

Enables components and modules to define their own child routes. childRoutes can be either a single route, array of routes or a function which accepts the Redux store as the sole argument and returns a single route or array of routes.

childRoutes is optional for Root Module. childRoutes can be either <Route> or <ModuleRoute> with a path. If childRoutes is not defined, the default path / is added to the root route.

const MyModule = () => { /* jsx */ };
MyModule.childRoutes = <ModuleRoute path="/" />;

Please see One App Router for more information.

Link

<Link> enables users to navigate around your application.

Please see One App Router's Link API docs for more information.

onEnter

Both Route and ModuleRoute accept an onEnter hook which is called before the component or module gets rendered.

Please see One App Router's onEnter API for more information.

onEnterRouteHook

onEnterRouteHook is similar to the onEnter hook however it is defined by the module rather than on Route or ModuleRoute.

MyModule.onEnterRouteHook = (nextState, replace, callback) => {
  if (!authorized) {
    replace('/login');
  }
  callback();
};

Please see the Holocron Module Route docs for information.

ModuleRoute

Please see ModuleRoute for more information.

📘 More Information

• For an root module implementation example see FrankLloydRoot

☝️ Return To Top