Package Exports

@leanjs/react-router
@leanjs/react-router/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@leanjs/react-router) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@leanjs/react-router

Installation

If you use a monorepo (recommended), at the root of your repository:

my-monorepo/
├─ micro-frontends/
│  ├─ react-router-micro-frontend-example/
│  │  ├─ package.json
├─ package.json  👈

execute the following command:

yarn add @leanjs/react-router @leanjs/react react-router-dom@6 react-dom@17 react@17

Then in the package.json of your micro-frontend app

my-monorepo/
├─ micro-frontends/
│  ├─ react-router-micro-frontend-example/
│  │  ├─ package.json 👈
├─ package.json

add the following peerDependencies:

"peerDependencies": {
  "@leanjs/react-router": "*",
  "@leanjs/react": "*",
  "react-router-dom": "*",
  "react-dom": "*",
  "react": "*"
}

and also the following devDependencies:

  "devDependencies": {
    "@leanjs/cli": "*"
  }

Usage

Create a file called index.ts in the src directory where your micro-frontend is.

my-monorepo/
├─ micro-frontends/
│  ├─ react-router-micro-frontend-example/
│  │  ├─ package.json
│  │  ├─ src/
│  │  │  ├─ ReactApp.tsx
│  │  │  ├─ index.ts 👈
├─ package.json

Note Read the recommended setup in our getting started page if you want to create a similar monorepo structure

Call createApp with the root component of your App and your createRuntime function and:

import { createApp } from "@leanjs/react-router";
// shared runtime example package created by your org
import { createRuntime } from "@my-org/runtime-shared";

import packageJson from "../package.json";
import { ReactApp } from "./ReactApp";

// 👇  you must `export default createApp(`
export default createApp(ReactApp, {
  createRuntime,
  packageName: packageJson.name,
});

Note Read @leanjs/core if you have not already created your own createRuntime function

Create ReactApp.tsx component, for example:

import React from "react";

export const ReactApp = () => <div>Hello React micro-frontend</div>;