@topkit/router v0.4.0

@topkit/router

Routing utilities for micro frontends (MFE)

How to install

yarn add @topkit/router

Usage

In the host application or in the environment where you component is mounted add RouteContext wrapper to provide route function for your MFE application:

// Host app, ex. Staff Portal
// App.tsx

import {RouteContext} from '@topkit/router'

// route function to format urls (example)
const route = (path: string) => {
  const result = path.replace('/platform/staff', '')

  if (BETA_ENABLED_PATHS.includes(result)) {
    return 'https://staff-portal.toptal.net/' + result
  }

  return 'https://staging.toptal.net/platform/staff' + result
}

...
return (
  <RouteContext.Provider value={route}>
    {children}
  </RouteContext.Provider>
)

In your MFE application you will be using this RouteContext provider by using Link component from @topkit/router:

// MFE application

import {Link} from '@topkit/router'
...
return (
  ...
  <Link href='/platform/staff/talents/1765560'>Elisabeth Marks</Link>
  // or
  <Link href='/talents/1765560'>Elisabeth Marks</Link>
  ...
)

Internally Link component is using route function provided by RouteContext provider to format href.

Additional Resources

MFE Routing