路由在React Outlook加载项中没有工作

Question

我使用

我转介了以下链接并试图弄清楚它，但没有解决我的问题：

• React Router in office JS excel causes white page
• 路由似乎在基于反应的addins
• 如何配置Office-js Excel React加载程序以使用React-Router-dom或替代解决方案？

注意：应该加载Outlook.com/outlook桌面应用程序/移动设备

这些是我到目前为止所做的更改

taskpane.html（src/taskpane/taskpane.html）

<script>
    window.backupHistoryFunctions = {};
    window.backupHistoryFunctions.pushState = window.history.pushState;
    window.backupHistoryFunctions.replaceState = window.history.replaceState;
  </script>
  <!-- Office JavaScript API -->
  <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js">
  </script>
  <script>      
    window.history.pushState = window.backupHistoryFunctions.pushState;
    window.history.replaceState = window.backupHistoryFunctions.replaceState;
    console.log(window.history.replaceState)
  </script>

index.tsx（src/taskpane/index.tsx）

const render = (Component) => {
  ReactDOM.render(
    <React.StrictMode>
      <HashRouter basename="/">
        <AppContainer>
          <ThemeProvider>
            <Component title={title} isOfficeInitialized={isOfficeInitialized} />
          </ThemeProvider>
        </AppContainer>
      </HashRouter>
    </React.StrictMode>,
    document.getElementById("container")
  );
};

/* Render application after Office initializes */
Office.onReady(() => {
  isOfficeInitialized = true;
  render(App);
});

app.tsx（ src/taskpane/components/app.tsx）

import * as React from "react";
import { Routes, Route} from "react-router-dom";
import About from "../pages/about";
import Expenses from "../pages/expenses";
import Invoices from "../pages/invoices";

export default function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<About/>} />
        <Route path="expenses" element={<Expenses />} />
        <Route path="invoices" element={<Invoices />} />
      </Routes>
    </div>
  );
}

about.tsx（src/taskpane/pepages/of.tsx）

import * as  React from 'react'
import { Link } from 'react-router-dom'

export default function About() {
    return (
      <div>
          About
          <br/>
          <Link to="/expenses/">Link to Expenses</Link>
     </div>
      
    )
  }

expenses.tsx（src/taskpane/pages/expenses.tsx）

import * as React from "react";
import {Link} from 'react-router-dom';

export default function Expenses() {
    return (
        <div>
            <h2>Expenses</h2>
            <br/>
            <Link to="/invoices/">Link to Invoices</Link>
        </div>
    );
}

Invoices.tsx（src/taskpane/taskpane/taskpane/pepage/pages/Invoices/Invoices。 tsx）

import * as React from "react";
import { Link } from "react-router-dom";

export default function Invoices() {
    return (
        <div>
            <h2>Invoices</h2>
            <br/>
            <Link to="/">Link to About</Link>
        </div>
    );
  }

这些是我的 package.json 文件中的依赖性和dev依赖性，

"dependencies": {
    "@fluentui/react": "^8.52.3",
    "@microsoft/office-js": "^1.1.73",
    "axios": "^0.26.1",
    "core-js": "^3.9.1",
    "es6-promise": "^4.2.8",
    "html5-history-api": "^4.2.10",
    "office-ui-fabric-core": "^11.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.3.0",
    "regenerator-runtime": "^0.13.7"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-typescript": "^7.13.0",
    "@types/office-js": "^1.0.180",
    "@types/office-runtime": "^1.0.17",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "@types/react-hot-loader": "^4.1.1",
    "@types/webpack": "^4.4.34",
    "@types/webpack-dev-server": "^4.1.0",
    "acorn": "^8.5.0",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^9.0.1",
    "eslint": "^7.20.0",
    "eslint-plugin-office-addins": "^2.0.0",
    "eslint-plugin-react": "^7.28.0",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "less": "^3.9.0",
    "less-loader": "^10.0.1",
    "office-addin-cli": "^1.3.5",
    "office-addin-debugging": "^4.3.8",
    "office-addin-dev-certs": "^1.7.7",
    "office-addin-lint": "^2.0.0",
    "office-addin-manifest": "^1.7.7",
    "office-addin-prettier-config": "^1.1.4",
    "os-browserify": "^0.3.0",
    "process": "^0.11.10",
    "source-map-loader": "^3.0.0",
    "ts-loader": "^9.2.5",
    "typescript": "^4.3.5",
    "webpack": "^5.50.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "4.7.3"
  },

这些是控制台错误：

图像

Answer 1

yo Office 命令生成的项目的React版本为17，相应的React-Router-Dom版本似乎为5。我修改了 taskpane.html基于以下文章 office.js用法，我能够确认它有效。

<!-- taskpane.html -->
<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. -->
<!-- See LICENSE in the project root for license information -->

<!DOCTYPE html>
<html lang="en" data-framework="typescript">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Contoso Task Pane Add-in</title>

+   <script type="text/javascript">
+     window._historyCache = {
+       replaceState: window.history.replaceState,
+       pushState: window.history.pushState,
+     };
+   </script>

    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>

+   <script type="text/javascript">
+     window.history.replaceState = window._historyCache.replaceState;
+     window.history.pushState = window._historyCache.pushState;
+   </script>

    <!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui#/. -->
    <link
      rel="stylesheet"
      href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
    />

    <!-- Template styles -->
    <link href="taskpane.css" rel="stylesheet" type="text/css" />
  </head>

  <body class="ms-font-m ms-Fabric">
    <div id="container"></div>
  </body>
</html>