Using react-router in a Microsoft Office add-in

Question

I am building a Microsoft office add-in and using React. Usually, the navigation on the web is done using react-router-dom. However, I am not able to initialize the HashRouter in the index.js file, since it gives me only a white page. I am not sure where the bug is, since it is extremely difficult to debug apps for Office.

Did anyone encounter the same problem?

import App from "./components/App";
import { AppContainer } from "react-hot-loader";
import { initializeIcons } from "@fluentui/font-icons-mdl2";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./redux/store";
import { HashRouter as Router, Route } from "react-router-dom";

/* global document, Office, module, require */

initializeIcons();

let isOfficeInitialized = false;

const title = "Contoso Task Pane Add-in";

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <Router>
          <Component title={title} isOfficeInitialized={isOfficeInitialized} />
        </Router>
      </Provider>
    </AppContainer>,
    document.getElementById("container")
  );
};

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

/* Initial render showing a progress bar */
render(App);

if (module.hot) {
  module.hot.accept("./components/App", () => {
    const NextApp = require("./components/App").default;
    render(NextApp);
  });
}

I tried changing the render method to

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <Router>
          <Route exact path="/" element={<Component title={title} isOfficeInitialized={isOfficeInitialized} />} />
        </Router>
      </Provider>
    </AppContainer>,
    document.getElementById("container")
  );
};

This does not solve the issue, however. I am using react@17 and react-router-dom@6.

Answer 1

I solved the problem with the help of the comments provided by Drew Reese. The problem was two-fold:

• The BrowserRouter component does not work in a Microsoft Office Add-In. We need to use HashRouter instead.
• The routing pattern used in the newest react-router-dom@6 library does not work with react@17 in a Microsoft Office Add-In. We need to use react-router-dom@5 instead, which uses the <Switch /> component for routing.

The code in index.js looks like this:

import App from "./main/App";
import { AppContainer } from "react-hot-loader";
import { initializeIcons } from "@fluentui/font-icons-mdl2";
import { Provider } from "react-redux";
import store from "./store";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { HashRouter } from "react-router-dom";

/* global document, Office, module, require */

initializeIcons();

let isOfficeInitialized = false;

const title = "Cool title";

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <HashRouter>
          <Component title={title} isOfficeInitialized={isOfficeInitialized} />
        </HashRouter>
      </Provider>
    </AppContainer>,
    document.getElementById("container")
  );
};

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

/* Initial render showing a progress bar */
render(App);

if (module.hot) {
  module.hot.accept("./main/App", () => {
    const NextApp = require("./main/App").default;
    render(NextApp);
  });
}

And the actual routing is implement in App.js and looks like this:

import * as React from "react";
import PropTypes from "prop-types";
import { Switch, Route } from "react-router-dom";

function App() {
  return (
    <main>
      <h1>App Title</h1>
      <Stack>
        <Switch>
          <Route exact path="/">
            <div>Hello World</div>
          </Route>
          <Route exact path="/main">
            <div>Hello Main</div>
          </Route>
        </Switch>
      </Stack>
    </main>
  );
}

export default App;

App.propTypes = {
  title: PropTypes.string,
  isOfficeInitialized: PropTypes.bool,
};