如何在single-spa React应用中为single-spa-router的base属性添加动态路径

1. 通过single-spa根配置传递动态值 #

在single-spa的根配置文件（一般是root-config.js）中，注册布局应用时传入动态生成的base路径，再在布局应用内接收并绑定：

根配置示例 #

// root-config.js
// 可根据环境变量、URL参数等逻辑动态生成base路径
const dynamicBase = '/your-custom-path';

registerApplication({
  name: '@your-org/layout',
  app: () => System.import('@your-org/layout'),
  activeWhen: () => true,
  customProps: {
    basePath: dynamicBase
  }
});

Vue布局应用接收绑定 #

如果布局是Vue应用，通过single-spa的生命周期props获取动态值后绑定：

<template>
  <single-spa-router :base="basePath">
    <main>
      <route default>
        <h1>404 route not defined</h1>
      </route>
    </main>
  </single-spa-router>
</template>

<script>
export default {
  data() {
    return {
      basePath: '/'
    };
  },
  mounted() {
    this.basePath = this.$root.singleSpaProps.customProps.basePath;
  }
};
</script>

2. 纯HTML场景下直接用JS修改DOM属性 #

如果布局是纯HTML文件，可在页面加载时通过JavaScript动态设置base属性：

<single-spa-router id="spa-router" base="/">
  <main>
    <route default>
      <h1>404 route not defined</h1>
    </route>
  </main>
</single-spa-router>

<script>
// 动态生成base值，比如从URL参数、全局变量获取
const dynamicBase = '/dynamic-base-path';
document.getElementById('spa-router').setAttribute('base', dynamicBase);
</script>

3. React布局应用的实现 #

如果布局是React应用，通过useSingleSpaContext钩子获取传递的props后绑定：

import { useSingleSpaContext } from 'single-spa-react';

function Layout() {
  const { customProps } = useSingleSpaContext();
  const basePath = customProps.basePath || '/';

  return (
    <single-spa-router base={basePath}>
      <main>
        <route default>
          <h1>404 route not defined</h1>
        </route>
      </main>
    </single-spa-router>
  );
}

export default Layout;

内容的提问来源于stack exchange，提问作者user2613946