How to configure Office-js excel react add-in to use react-router-dom or alternative solutions?

Question

So I'm trying to set up an Office-js excel add-in using react (using the yeoman office-js generator found here https://github.com/OfficeDev/generator-office ) and am running into issues configuring the add-in to use multiple routes. Doesn't look like traditional React routing works right out of the box (currently trying to use react-router-dom). Anybody know how I'd go about doing this? In particular, looking to see how I should configure some sort of routes, webpack.config.js, and the manifest.xml.

Would love to load up, for example, something like a LandingComponent on route=[baseUrl]/, and something like SignupComponent on [baseUrl]/signup.

For regular old React, what I'm trying to do would look something like this

const Routes = () => (
  <div>
    <Route path="/" exact component={LandingComponent} />
    <Route path="/signup" exact component={SignupComponent} />
  </div>
)

Key pieces of code I suspect would require modification would involve probably something in webpack.config.js (painfully new to actually configuring webpack, not sure if I will need to deal with this guy),

manifest.xml

<DefaultSettings>
    <SourceLocation DefaultValue="https://localhost:3000/taskpane.html"/>
</DefaultSettings>

Also I'm looking into doing things like removing the '.html' from the URL above (the goal being that the addin should load the landing by default at ' https://localhost:3000/ ', and you can nav via buttons to ' https://localhost:3000/signup ', whereas the addin is currently loading ' https://localhost:3000/taskpane.html ' by default).

Sorry for the word vomit, still very new at this and not sure what is and isn't possible!

Answer 1

I had the same issue, and the solution I used was essentially following @Ragavan Rajan's solution of using HashRouter instead of BrowserRouter .

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


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

This answer provides more insight. Ultimately, two functions which are used in maintaining a history of where you have navigated are set to null:

window.history.replaceState = null;
window.history.pushState = null;

and when you try to use the normal browser routing, an exception if thrown because these functions don't exist, which doesn't happen with Hash Routing.

Answer 2

Another option is to simply override the override

<!-- Office JavaScript API -->
<script type="text/javascript">
    // Office js deletes window.history.pushState and window.history.replaceState. Cache them and restore them
    window.historyBackup = {
        replaceState: window.history.replaceState,
        pushState: window.history.pushState
    };
</script>

<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

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