How to use single-spa-react - 10 common examples

import singleSpaReact from 'single-spa-react';
import navbar from './navbar.component.js';

/* The navbar app is an app that is always active and is responsible for showing the top navbar.
 * It is written in React and does not even use a router like react-router since it doesn't really
 * care about what the url is -- it just shows the menu items regardless. If we wanted to have an active
 * state for the menu item that is active, then we would need to either add in a hashchange listener or
 * a router like react-router.
 *
 * This app runs concurrently with any and all apps that are also active. It resides in its own <div>
 * and renders its content fixed to the page.
 *
 * This app is intended to show how simple a single-spa application can be.
 */

const reactLifecyles = singleSpaReact({
  React,
  ReactDOM,
  domElementGetter,
  rootComponent: navbar,
});

export const bootstrap = [
  reactLifecyles.bootstrap,
];

export const mount = [
  reactLifecyles.mount,
];

export const unmount = [
  reactLifecyles.unmount,</div>

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import NavBar from './root.component.js';

export const navBar = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: NavBar,
  domElementGetter,
})

// Finally, we specify the location we want single-spa to mount our application
function domElementGetter() {
  return document.getElementById("navBar")
}

import React from 'react'
import ReactDOM from 'react-dom'
import singleSpaReact from 'single-spa-react'
import RootComponent from './RootComponent.js'

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: RootComponent,
  domElementGetter,
})

export const bootstrap = [reactLifecycles.bootstrap]
export const mount = [reactLifecycles.mount]
export const unmount = [reactLifecycles.unmount]

function domElementGetter() {
  return document.getElementById('__spa_content__')
}

import * as React from "react";
import * as ReactDOM from "react-dom";
import singleSpaReact, { Lifecycles } from "single-spa-react";
import Root from "./root.component";

/**
 * 同步模式
 */

const reactLifecycles: Lifecycles = singleSpaReact({
  React,
  ReactDOM,
  loadRootComponent: () => Root as any,
  suppressComponentDidCatchWarning: true,
});

export function bootstrap(props) {
  return reactLifecycles.bootstrap(props);
}

export function mount(props) {
  return reactLifecycles.mount(props);
}

export function unmount(props) {
  return reactLifecycles.unmount(props);

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Root from './root.component.js';

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Root,
});

export function bootstrap(props) {
  return reactLifecycles.bootstrap(props);
}

export function mount(props) {
  return reactLifecycles.mount(props);
}

export function unmount(props) {
  return reactLifecycles.unmount(props);
}

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import RootComponent from './RootComponent.tsx';

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: RootComponent,
  domElementGetter,
});

export const bootstrap = [
  reactLifecycles.bootstrap,
];
export const mount = [
  reactLifecycles.mount,
];
export const unmount = [
  reactLifecycles.unmount,
];

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Root from './root.component.js';

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Root,
  domElementGetter,
});

export function bootstrap(props) {
  return reactLifecycles.bootstrap(props);
}

export function mount(props) {
  return reactLifecycles.mount(props);
}

export function unmount(props) {
  return reactLifecycles.unmount(props);

import React from 'react'
import ReactDOM from 'react-dom'
import singleSpaReact from 'single-spa-react'
import RootComponent from './RootComponent.js'

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: RootComponent,
  domElementGetter,
})

export const bootstrap = [reactLifecycles.bootstrap]
export const mount = [reactLifecycles.mount]
export const unmount = [reactLifecycles.unmount]

function domElementGetter() {
  return document.getElementById('root')
}

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Home from './root.component.js';

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Home,
  domElementGetter,
})

export const bootstrap = [
  reactLifecycles.bootstrap,
];

export const mount = [
  reactLifecycles.mount,
];

export const unmount = [
  reactLifecycles.unmount,

static newReactSpaApp = function (rootComponentAsyncLoader, targetDomId) {
    const reactLifecycles = singleSpaReact({
      React,
      ReactDOM,
      loadRootComponent: async () => {
        const component = await rootComponentAsyncLoader()
        if (component.default) {
          return component.default
        }
        return component
      },
      domElementGetter: () => document.getElementById(targetDomId),
    })
    return {
      bootstrap: [reactLifecycles.bootstrap],
      mount: [reactLifecycles.mount],
      unmount: [reactLifecycles.unmount],
    }