在Microsoft Office加载项中使用react-router-dom出现白屏问题求助

针对你遇到的问题，结合React Router v6的特性和Office加载项的运行环境，下面是具体的排查和修复方案：

1. 修正React Router v6的路由配置错误 #

React Router v6彻底改变了路由的写法，必须用<Routes>组件包裹所有<Route>，同时exact属性已经被移除（默认路由就是精确匹配）。你之前的两种写法都不符合v6的规范，这是导致页面空白的核心原因之一。

修改后的render方法如下：

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <Router>
          {/* 必须用Routes包裹Route */}
          <Routes>
            <Route path="/" element={<Component title={title} isOfficeInitialized={isOfficeInitialized} />} />
          </Routes>
        </Router>
      </Provider>
    </AppContainer>,
    document.getElementById("container")
  );
};

2. 确保Office初始化完成后再渲染完整路由组件 #

你的代码会先执行一次初始渲染，但此时Office还未初始化，如果App组件里有依赖Office API的逻辑，可能会抛出异常导致页面空白。可以调整逻辑，只在Office初始化后渲染带路由的组件，初始渲染仅显示加载状态：

// 单独定义加载组件
const Loading = () => <div>加载中...</div>;

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        {/* 未初始化时只显示加载组件，不渲染路由 */}
        {isOfficeInitialized ? (
          <Router>
            <Routes>
              <Route path="/" element={<Component title={title} isOfficeInitialized={isOfficeInitialized} />} />
            </Routes>
          </Router>
        ) : (
          <Loading />
        )}
      </Provider>
    </AppContainer>,
    document.getElementById("container")
  );
};

// 初始渲染加载状态
render(Loading);

Office.onReady(() => {
  isOfficeInitialized = true;
  // 初始化完成后渲染App组件
  render(App);
});

3. 排查Office加载项的哈希路由兼容性 #

Office任务窗格运行在iframe环境中，部分Office版本对URL哈希的处理可能有特殊限制。可以尝试以下验证：

• 打开浏览器开发者工具（任务窗格中按F12），查看控制台是否有路由相关报错
• 尝试将HashRouter替换为MemoryRouter（不依赖URL哈希），验证是否能正常渲染：

  import { MemoryRouter as Router, Routes, Route } from "react-router-dom";
  

  如果MemoryRouter能正常显示，说明是哈希路由与Office环境的兼容性问题，可继续使用MemoryRouter，或检查Office加载项配置是否允许哈希路由。

4. 验证react-hot-loader的兼容性 #

React 17与react-hot-loader可能存在兼容性问题，建议暂时移除AppContainer和热加载相关代码，验证是否是热加载导致的空白：

// 移除react-hot-loader相关代码
const render = (Component) => {
  ReactDOM.render(
    <Provider store={store}>
      <Router>
        <Routes>
          <Route path="/" element={<Component title={title} isOfficeInitialized={isOfficeInitialized} />} />
        </Routes>
      </Router>
    </Provider>,
    document.getElementById("container")
  );
};

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