Routing doesn't work in react outlook add-in

Question

I created a new react outlook addin using the Yeoman generator and selected the React-Typescript Task pane option to create the add-in template. I installed react router dom version 6.3.0 and coded some basic routing as I would do for a regular React app. However, it doesn't work and keeps giving me a blank page although the same code works fine in a normal react web app.

I referred following links and tried to figure it out but it did not solve my issue:

• React Router in office JS excel causes white page
• Office.js nullifies browser history functions breaking history usage
• Routing doesn't seem to work in React based Addins
• How to configure Office-js excel react add-in to use react-router-dom or alternative solutions?

Note: The add-in should load in outlook.com/outlook desktop application/ mobile

These are the changes I've done so far

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/pages/about.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/pages/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>
    );
  }

These are the dependencies and devDependencies in my package.json file

"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"
  },

These are the console errors:

image

Answer 1

The React version of the project generated by the yo office command is 17, and the corresponding react-router-dom version appears to be 5. I modified the taskpane.html file based on the following article Office.js nullifies browser history functions breaking history usage, and I was able to confirm that it works.

<!-- 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>