如何在 Single Spa 中为 React Micro 前端应用程序定义路由

Question

我使用命令create-single-spa在single spa中创建了一个react micro front end应用程序。 在singleSpaReact方法中，提到了根组件。

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  Router,
  rootComponent: Root,
  errorBoundary(err, info, props) {
    // Customize the root error boundary for your microfrontend here.
    return null;
  },
});

但是反应微应用程序本身有几个页面。 但是我不明白如何在singleSpaReact方法中定义路由。 谁可以帮我这个事。

Answer 1

我和你有同样的问题，我终于解决了这个问题：

我定义了我的 singleSpaReact：

import React from 'react';
import ReactDOMClient from 'react-dom/client';
import singleSpaReact from 'single-spa-react';
import Layout from './Layout';
import { contentDomElementGetter } from '../dom-utils';


const reactLifecycles = singleSpaReact({
  React,
  ReactDOMClient,
  rootComponent: (Layout as any),
  domElementGetter: contentDomElementGetter,
});

export const bootstrap = [
  reactLifecycles.bootstrap,
];

export const mount = [
  reactLifecycles.mount,
];

export const unmount = [
  reactLifecycles.unmount,
];

我在我的布局组件中定义了我的路线：

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { Header } from './components/Header';
import "bootstrap/dist/css/bootstrap.min.css";
import Home from './pages/Home/Home';
import Reservations from './pages/Reservations/Reservation';
import Tickets from './pages/Tickets/Ticket';
import Cvtheque from './pages/Cvtheque/Cvtheque';

export default class Layout extends React.Component{
  render(): React.ReactNode {    
    return (
      <>
        <BrowserRouter>
          <Header />
            <div>
              <Routes>
                <Route path="/home" element={<Home/>} />
                <Route path="/reservations" element={<Reservations/>}></Route>
                <Route path="/tickets" element={<Tickets/>} />
                <Route path="/cvtheque" element={<Cvtheque/>} />
              </Routes>
            </div>
        </BrowserRouter>
      </>
    );
  }
};

请注意，我使用 react-router-dom V6 进行了管理，但如果您使用的是 V6，请使用 Switch 而不是 Routes