How do I route in react word web add-in?

Question

I'm trying to route in word web add-in but it is saying office js not fully loaded, even though I have added the necessary condition for office js initialization.

Below is the index.js part where I'm trying to route between the components. But as soon as I introduce it, the logs start to show Object expected and Office.js not loaded:

import "office-ui-fabric-react/dist/css/fabric.min.css";
import App from "./components/App";
import { AppContainer } from "react-hot-loader";
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Router } from "react-router-dom";
import { createBrowserHistory } from "history";
/* global AppCpntainer, Component, document, Office, module, React, require */

const history = createBrowserHistory();

initializeIcons();

let isOfficeInitialized = false;

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

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

/* Render application after Office initializes */
Office.initialize = () => {
  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);
  });
}

enter image description here

It doesn't matter if I have added any switch or anything. It doesn't even reach that code.

in addition to that sometimes if I just import some libraries but do not use them then again it shows me officejs not loaded fully.

If anyone can help me with the basic routing and state management in this then it would be great. I'm stuck here from last 7 days.

Answer 1

You should use HashRouter:

import {
  HashRouter as Router,
  Switch,
  Route
} from "react-router-dom";

...
render() {
return (
<Router>
  <div>
    <Switch>
      <Route exact path="/main" component={Home} />
    </Switch>
  </div>
</Router>
);
}